I saw many questions about NS_ERROR_FAILURE when calling getBBox in Firefox, and as I understand, element must be visible before calling this:
Error : NS_ERROR_FAILURE in firefox while use getBBox()
But in my case, element is part of <mask>, and it seems that Firefox does not recognize it as visible element at all.
Markup is following:
<svg>
<mask id="mask">
<text
dominantBaseline="central"
textAnchor="middle"
x="50%" y="50%"
fill="white"
>
...
</text>
</mask>
<image mask="url(#mask)" xlink:href="..." width="100%" height="100%" />
</svg>
and I'm using getBBox on <text> to use it's dimensions as viewBox params (i.e., to stretch text at all available space inside svg).
With this, inspector shows that <text> has dimensions 0x0, like if it was invisible or not present in DOM.
What can I do to make it work?
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.
Scaling a parent DIV containing an SVG that has image over a colored rect shows hairline edges from the underlying rect.
<div style='transform: scale(0.79454)'>
<svg width="1280" height="720">
<rect fill="yellow" width="1280" height="720"/>
<image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/>
</svg>
</div>
In the screenshot below, there is a yellow box beneath the image. Both are the same size but you can see the yellow box "bleed" out from the edges a bit (you may to view the full image or the fiddle below to see it clearly).
This artifact happens whether or not I transform the image node and also appears when I try scaling the SVG using a viewBox instead of the parent div. It's somewhat better in Safari than in Chrome but it does still happen in certain cases.
Here's a fiddle https://jsfiddle.net/e17ea4j5/
Is there any fix to this?
What you seeing is the result of anti-aliasing. The semi-transparent pixels at the edges of the yellow rectangle are visible through the semi-transparent pixels at the edges of the image.
There isn't really any elegant solution to eliminate those issues. Especially when when you are scaling by fractions (eg. 1.4 and 0.79454).
You are left with somewhat hacky solutions like putting a black stroke around your rectangle.
<rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>
body{
background: black;
margin: 0;
}
<body>
<div style='transform: scale(0.79454)'>
<svg width="1280" height="720">
<rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>
<image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/>
</svg>
</div>
</body>
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.
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>