Is there any way to define a color animation for multiple elements at once? I tried adding the animateColor to a g element, but that didn't work. I could use Javascript to add an animateColor to each element individually, but I'd prefer to do it all in the static SVG data.
Please use animate instead of animateColor. Firefox, at least, doesn't implement animateColor at the moment and it is being deprecated in SVG 1.1 Second Edition. Using animate for animating fill and stroke works just fine. For example:
<g>
<animate attributeName="fill" from="black" to="red" dur="5s"/>
<rect width="100" height="100"/>
<circle cx="200" cy="50" r="50"/>
</g>
Related
I have produced a tree diagram using svg as rectangular nodes in D3js. Here is the bl.ock for it:
http://bl.ocks.org/Coola85/2450007804d9508866616640ac1272b8/fea7a37158edf9accd749a6fa3399800bea9bbad
The output in the browser looks like this and the aim is to be able to save this as an SVG:
I use SVG Crowbar (https://nytimes.github.io/svg-crowbar/) to save the svg using Google Chrome.
When I try to open the svg in InkScape it pixelates the rectangles and it appears like this.
Adobe Illustrator completely fails to open the rectangles at all stating that a plugin is required. I searched everywhere but no such plugin exists.
I would like to find a way so that the images (in this case rectangles) still appear sharp and are vector paths/shapes.
The XML editor for inkscape shows that it is using the xlink:href for the svg file as shown below.
Here is the code for the Main SVG file output:
<?xml version="1.0" standalone="no"?>
<svg width="960" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family:serif;height:500px;perspective-origin:480px 250px;transform-origin:480px 250px;width:960px;-moz-text-size-adjust:auto;">
<g transform="translate(120,20)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(255, 0, 0);stroke-width:2px;" d="M0,230C90,230 90,115 180,115" />
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(0, 128, 0);stroke-width:2px;" d="M0,230C90,230 90,345 180,345" />
<g class="node" transform="translate(180,345)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: B</text>
</g>
<g class="node" transform="translate(180,115)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: A</text>
</g>
<g class="node" transform="translate(0,230)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="-15" dy=".35em" text-anchor="end" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;text-anchor:end;">Top Level</text>
</g>
</g>
</svg>
Any help is appreciated
This is to be expected in the current Inkscape version (0.92.3) and previous versions that support display of linked SVG files.
The next major version will still display embedded and linked SVG files as raster images, but it will allow you to set an import resolution, so you can make them large enough so they will appear crisp.
But this is just how it displays in Inkscape - if you plan to use the SVG file in a browser later, it doesn't matter if it looks ugly while you are editing it. It will look correct, if the browser (or whichever other program you plan to use) can display linked SVG images correctly.
If you need to export a PNG image, then you should consider importing the rectangles, maybe using clones. You can use the align+distribute dialog to swap positions of objects, this makes it easy to place them in the exact same location as they were before.
With firefox, when I middle-click (or ctrl+click) on a use element, it open the xlink:href url in new tab (like a href)
bug or feature?
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;"></use>
</svg>
<p>ctrl+click on right circle</p>
It's an unresolved bug that they're not really sure how to handle. Trigger is the xlink:href that gets somehow internally treated just like an A.href does (middle-click or ctrl + click open to a new tab.) One workaround is to bury the xlink:href element under an invisible rect:
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e" />
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;" />
<rect style="opacity:0" x="80" y="10" width="60" height="60" />
</svg>
<p>ctrl+click on right circle - nothing happens</p>
If you have any events that need to trigger, you'll have to tie them to the invisible rect.
As a workaround for the bug linked in previous answer you may also use pointer-events: none CSS rule on the use element:
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red; pointer-events: none;"></use>
</svg>
<p>ctrl+click on right circle</p>
Or declare that all use elements must not be clickable with <style>use{pointer-events: none;}</style>.
Obviously, this workaround is applicable only in case the element has NOT to be interactive at all.
So i'm busy with SVG and i need a couple of images in my project. So you have the element . You can also give the height and width. The given picture doesn't resize to the height and width you give to the image element.
I have this code:
<g class="node image" transform="translate(0,129.652067739873)" type="ad">
<image href="content/image/image.png" height="30px" width="100px" y="41.94444444444444" x="0">
<title>google.nl</title>
</image>
<text y="56.625" x="106" dy=".35em" text-anchor="start">google.nl</text>
</g>
Now i want that the image.png cover the whole image element. Like background-size:cover; But that doesn't work, and i can't find any attribute who can do this. Is there a way to do this in a correct way?
Try setting preserveAspectRatio="none" for the <image> element. Also, if you want it to cover all of the svg, set width and height to '100%'
<image href="content/image/image.png" height="100%" width="100%" y="41.94444444444444" x="0" preserveAspectRatio="none">
I have a d3.js application that renders images as nodes in a connected graph. After Chrome was updated to 34.0.1847.131, modifying opacity style attribute on an image causes display weirdness. Images and other svg elements will disappear or become partial rendered. I have tested in Chrome 33.0.1750.117, as well as recent Firefox and IE versions and they each work as expected.
I created a plunker to demostrate this: http://plnkr.co/1jKDh5JMiuxouQyqZzGy.
If anyone can give me a workaround or if there is something incorrect in my plunker, please let me know. Otherwise, it appears to be a bug with Chrome 34. I have reported an issue on Google Chrome forums, and there is another post on the Google Chrome forums with a similar issue.
My Chrome forums post:
http://bit.ly/1lXTHs0
Another user's Chrome forum post:
http://bit.ly/1ilYMsZ
As a temporary workaround:
The problem with one element's opacity affecting others seems to only apply to sibling elements. So one solution is to wrap each element inside its own <g> element (but still apply the changes in opacity to the element itself).
This SVG code displays fine:
<svg>
<g transform="translate(50,30)">
<g>
<image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="100" y="50" width="50px" height="50px" style="opacity: 0.30000000000000004;"></image>
</g>
<g>
<image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="300" y="50" width="50px" height="50px" style="opacity: 0.30000000000000004;"></image>
</g>
<g>
<image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="200" y="50" width="50px" height="50px"></image>
</g>
<g>
<rect class="node" x="100" y="150" width="50" height="50" style="opacity: 0.30000000000000004;"></rect>
</g>
<g>
<rect class="node" x="300" y="150" width="50" height="50" style="opacity: 0.30000000000000004;"></rect>
</g>
<g>
<rect class="node" x="200" y="150" width="50" height="50"></rect>
</g>
</g>
</svg>
Live example with comparison against the SVG from your original code
For your simple d3 code example, this only requires some extra append calls:
var nodes = svg.selectAll("image.node").data(nodeData);
nodes.enter().append("g").append("image")
.attr("class", "node")
/* ...*/
svg.selectAll("image.node")
.filter(function(d) {
return d.id <= 2;
}).transition().delay(1000).style("opacity","0.3");
var rects = svg.selectAll("rect.node").data(nodeData);
rects.enter().append("g").append("rect")
.attr("class", "node")
/* ...*/
svg.selectAll("rect.node")
.filter(function(d) {
return d.id <= 2;
}).transition().style("opacity","0.3");
However, note that the entering elements added to your selection are now the <g> elements, not the shapes, so you need to re-select them before you can modify the shapes themselves. Your example code already did this, but not all examples would.
It's not ideal — beyond the extra code, you're doubling the number of DOM elements, which could slow things down if you have a lot of elements to start — but it's fairly straightforward to implement now and then remove later once most Chrome users have updated to the patched version.
In the following SVG document, the first rectangle's opacity is animated using calcMode=discrete, and flashes on and off as I would expect. The second rectangle is supposed to be animated using calcMode=linear, but no animation is visible in Chrome or Firefox.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 500">
<rect width="300" height="100" transform="translate(50,50)" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
<animate attributeName="opacity" attributeType="XML" dur="1.2s" values="0.1; 1.0; 0.1" keyTimes="0; 0.33; 0.67" calcMode="discrete" repeatCount="indefinite" />
</rect>
<rect width="300" height="100" transform="translate(50,250)" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
<animate attributeName="opacity" attributeType="XML" dur="1.2s" values="0.1; 1.0; 0.1" keyTimes="0; 0.33; 0.67" calcMode="linear" repeatCount="indefinite" />
</rect>
</svg>
http://jsfiddle.net/aJUnZ/
Is my animation not defined correctly, is this not supported by SVG, or is it simply not implemented by browsers yet?
From the SVG Specification...
For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.
Your final keyTimes value is not 1 and therefore your animation isn't valid. Change it to 1 and it will work.