I've built a frontend tool for zooming in/out of an SVG canvas, but when I zoom, any 1px strokes increase in width (visually). Is there a svg setting that will ensure that 1px strokes remain 1px (visually) when zoomed? I remember reading about it somewhere, but can't find the resource.
Try to add vector-effect="non-scaling-stroke" attribute to the path. Check HERE for details. Im guessing that's what you want?
Related
I am searching for a good solution to work with SVG Sprites.
Currently I have a folder of svg files, with grunt-svg-sprite I get a SVG sprite image and a CSS File with background image definitions.
Now I want to replace my single-file SVGs with the sprite SVG, but I cant resize them. Some of them are not in the correct size in the original file. I tried lots of combinations with width, height, background size, without success.
Here is the CSS with single file SVG for a list item with a checkbox image:
li {
background-image: url(../../img/check_red.svg);
background-position: 0 12px;
background-repeat: no-repeat;
background-size: 16px auto;
padding-left: 26px;
}
How to do this with a sprite SVG?
I need a solution with some kind of automation: new SVG files are added after running a task, SVGs have different sizes, and so on.
What I tried already and did not work was grunt-svgstore, the SVG images were messed up (changed shapes, lines, colors)
What about this approach here:
.icon-clock {
background: url("sprite.svg#svgView(viewBox(0, 0, 32, 32))") no-repeat;
}
I did not test it but it allows you to define the viewbox inside the background.
(Source: https://css-tricks.com/svg-fragment-identifiers-work/)
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I have a number of transparent overlapping ellipses (as shown below).
I highlight each ellipse on mouseover, but it is impossible to highlight many ellipses because other ellipses have been drawn over them.
From my limited knowledge of svg, there are three solutions:
Find some way to only detect mouseovers on the edges of each ellipse.
Draw the ellipses using bezier curves.
Reorder the drawing of ellipses. I am not sure how to do this, or if it is even possible to solve it this way given all these shapes.
Any help is much appreciated!
Target areas in svg are only whatever is painted on-screen. So, in theory, your ellipses should be hoverable only on their strokes. If this is not the case then you might be setting your fill with something else than none (perhaps rgba(0,0,0,0) ?).
You might also also be setting the hover on the g element instead of the ellipse.
You can see an example here: http://jsfiddle.net/r65E9/
ellipse {
stroke: #fff;
stroke-width: 1;
fill: none;
}
ellipse:hover {
stroke: #f66;
}
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
<style>
.overlay:hover
{
opacity: 0.5;
}
</style>
<svg>
<a xlink:href="http://www.wherever/you/want/to/link/to.com">
<path class="overlay" d="Coordinates of your shape..." />
</a>
</svg>
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.