Maybe someone is searching for an answer, like me for two days now: // Draw a path and hide it: var root = paper.path(‘M0 50L30 50Q100 100 50 50’).hide(); var length = root.getTotalLength(); // Setup your animation (in my case jQuery): element.animate({ ‘to’: 1 }, { duration: 500, step: function(pos, fx) { var offset = … Read more
To rotate the gradient you can e.g use the ‘gradientTransform’ attribute, like this: <?xml version=”1.0″ ?> <svg xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”100%” viewBox=”0 0 1 1″ preserveAspectRatio=”none”> <linearGradient id=”grad-ucgg-generated” gradientUnits=”userSpaceOnUse” x1=”0%” y1=”0%” x2=”100%” y2=”0%” gradientTransform=”rotate(65)”> <stop offset=”0%” stop-color=”#ffffff” stop-opacity=”0″/> <stop offset=”100%” stop-color=”#ff0000″ stop-opacity=”1″/> </linearGradient> <rect x=”0″ y=”0″ width=”1″ height=”1″ fill=”url(#grad-ucgg-generated)” /> </svg>
If the lines are straight horizontal or vertical just place the lines at half a pixel off, like x=”1.5px”. Another way is to apply some CSS to the lines: .thelines{ shape-rendering:crispEdges } The spec chapter on shape-rendering property.
In my case, I changed the graphic elements that make up the image from svg to png. When using svg, I am seeing a security error in IE 11 (and 10), not Chrome, when I use toDataURL. Building the graphic using png elements, it’s fine. There is a 2nd problem with svgs not resizing properly … Read more
please see Converting SVG to PNG using C# – there are two options to deal with SVG from .NET… Another option is http://www.codeproject.com/KB/WPF/SharpVectors.aspx
Unfortunately iOS doesn’t support SVG icons at the moment. And it will probably not have support soon. Also android doesn’t support it. Update: It looks like Safari is starting to support SVG favicons See: http://caniuse.com/#feat=link-icon-svg To add a svg icon for pinned tabs within Safari you need to add: <link rel=”mask-icon” href=”https://stackoverflow.com/questions/15710047/website_icon.svg” color=”red”>
If you want to preserve it as a vector graphic instead of as a raster, you can try one of the libraries that translate the canvas API operations to svg. For SVGKit: var svgkitContext = new SVGCanvas(150,150); function draw(ctx) { // … normal canvas drawing commands go here … } // draw to SVGKit canvas … Read more
I was able to dynamically add nodes by adding the following code in the toggle function: $.getJSON(addthese.json, function(addTheseJSON) { var newnodes = tree.nodes(addTheseJSON.children).reverse(); d.children = newnodes[0]; update(d); }); Notes: I am using jQuery to retrieve the json file
Commas are mostly optional and whitespace is also mostly optional. You need one or the other in some cases to say when something ends and the next thing begins i.e. so that 1,1 or 1 1 is not parsed as 11. You can put a single comma between any two numbers so A, 30 50 … Read more
This is in my opinion the greatest flaw in svg: sandboxing. Svg files are sandboxed: in their own document, which is why a typical ‘fill:’ style will not apply. Likewise, the css you write in your svg will not apply to the rest of your site. Adding css directly to an svg: Not a good … Read more