I have an HTML website which I am currently converting to Rails erb views.
It contains an SVG image called sprite.svg that contains all the icons for the websites.
For example an icon for search is represented this way:
<svg width="20px" height="20px">
<use xlink:href="images/sprite.svg#search-20"></use>
</svg>
And an icon for cross is represented this way:
<svg width="20px" height="20px">
<use xlink:href="images/sprite.svg#cross-20"></use>
</svg>
I am trying to import this to a rails erb views like this:
First, I added the sprite.svg image to the project this way app/assets/images/sprite.svg
And then I referenced it this way:
<svg width="20px" height="20px">
<%= image_tag('sprite#search-20') %>
</svg>
but the icon doesn't seem to show up.
Can someone help me to figure out a better way to represent this in order for all the SVG icons in the svg image to show in the rails application views. Thanks in advance.
You shouldn't use the image_tag to display the svgs in the view. In order to show them up you can either use render or a helper method to "translate" the svg and then call it in your view.
This should help: How do I display SVG image in Rails?
Related
I have an inline svg with a filter applied to it for shadow effect on the right and buttom of the SVG .
<div id="d78" class="drag" style="width: 52px; margin: 0 auto;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" >
<defs>
<filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
<feGaussianBlur in="offset2" stdDeviation="3" result="blur2">/feGaussianBlur>
<feMerge>
<feMergeNode in="blur2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect class="rrfNode" fill="#4B4F54" x="0" y="0" width="130" height="130" style="filter: url(#blurFilter2); " />
</svg>
The container div is draggable and resizeable through jquery UI plugin . The container div has a color picker icon attached to it which when clicked displays the color palette and on choosing any color the svg rect changes to that particular color for which I have written some jquery .
Now when I resize the svg and then try to use the color picker to change color of the svg rect , the svg just disappears from view even though I can see that the svg color is getting set when I inspect the element in the Chrome browser .
The jquery code to change color is :
$(document).on('changeColor','.fa-eyedropper',function(e) {
$(this).parents(".ui-draggable").find(".rrfNode").css({ fill: color.toHex()});
});
The invisible svg reappears again after I resize the svg .
When I delete the filter this problem gets resolved . But I need to keep both the resize and the color picker along with the filter .
I suspect that it is a problem with the filter , but I cannot figure that out . After searching and trying to solve this bug for 2 days I am posing this question . Please help .
Found out the reason behind this strange behaviour . The filter id in all the svg images were the same so any change to any of the svgs would result in the shadows of other svg images disappearing along with the content of the images, in effect the image will disappear. I changed the filter ids for the svg images , such that all svgs have unique filter ids and that has solved my problem . It was a very silly mistake on my part.
Correct me if I'm wrong but I could have sworn chart.chartWidth used to return the exact width attribute as returned by getSVG().
I'll explain.
Say I target a div that forces a chart to render with the following as read via view source.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="270" height="300">
Now if I call chart.highcharts().chartWidth I'll get 270. Great!
But if I then call chart.highcharts().getSVG() I'll get this is an opening
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="600">
I've been using and adding to an export function that will combine multiple charts into a single and I typically need to do some scaling to get it to look nice. The scale is dependent on the originally rendered size, not the default and now it's causing a huge problem.
Shouldn't getSVG return svg representing the chart as it appears in html?
Have you tried sourceWidth or scale parameter?
What I want to do is to have a form where you can upload a picture, then when you view that object, the picture cones up centered, vertically and horizontally in a specific div. The size of it is unknown, etc.
Unless there is a way to center it vertically with the image_tag helper, I like to be able to use the image as a background image. In my .css.scss file, I want to be able to do something like
.image_div {
background-image: image_url("#{#object.image}");
background-position: center
}
Im using CarrierWave to upload the pictures, and when I output #object.image it gives the path on my computer to the image (so I don't know if in production that would be considered the path or url). Any ideas?
It's possible to use erb in a sass file, but it's a really, really bad idea, as your css will have to be parsed on each request (and the browser will be unable to cache it).
I'd recommend just sticking that one snippet of css directly on the view page in a style tag. That way it gets evaluated with the page. Make sense?
UPDATE (adding requested example)
Add this to your actual view (ex. show.html.erb):
<style media="screen">
.image_div { background-image: url(<%= #object.image %>); }
</style>
You can leave the background-position declaration in the css file since it's not dynamic. #object.image needs to return the actual path to the image, so if #object.image is a ruby object, you'll need to access whatever property stores the path (#object.image.path or #object.image.url or whatever fits your codebase).
I am trying to implement the bootstrap tooltips, instead of the small fitted black area like in the examples, I am experiencing a large outer rectangular box. Just wondering if anyone has encountered this problem?
I am initializing with
$("[rel=tooltip]").tooltip();
My tooltip area is
<a id="button" style="float: left; margin-left:12px; margin-right:2px" rel="tooltip" title="first tooltip" href="#"></a>
I was being terribly dumb, there was another file in the project that was overriding some of the bootstrap css files. I found this by using google chrome devloper tools>going to scripts, pausing while the hover box was up and then going back to elements, inspecting the hover and viewing which css files are being used.
I have a single image (a flattened out image of the world map), I want to be able to plot some coordinates in this image without having to create a map server or whatever per se, Idon't know where to begin, whats the easiest approach
This will absolutely position links within a containing div with a background image:
(inline css used to simplify concept).
<div style="width:500px;height:400px;position:relative;background-image:url('image.png')">
<div style="top:20px;left:35px;position:absolute;">
link
</div>
<div style="top:120px;left:65px;position:absolute;">
link
</div>
</div>
Use OpenLayers.Layer.Image.