Foreign element in Svg - javascript
I have an svg element in my page with several polygons that together create a sort of "map", I'd like to put an <img> element in these polygon so I can have access to its parent Id (the polygon owner) and know how many images I have inside a polygon.
How can I do it?
<div id="Div-mappa" >
<svg id="Mappa" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon
class="regione"
id="Area1"
onclick="attiva(this.id)"
points="1,0,1,110,6,107,14,103,19,103,24,109,29,113,31,116,35,119,37,121,44,119,51,116,53,112,60,110,63,106,65,99,64,90,64,85,64,77,66,73,68,68,69,64,72,64,74,65,76,67,76,69,78,71,81,68,86,62,91,59,99,57,107,56,114,54,126,52,129,46,132,40,134,37,131,31,127,27,126,21,126,17,127,12,127,7,127,4,127,2,128,0"/>
<polygon
class="regione"
id="Area2"
onclick="attiva(this.id)"
points="129,1,129,11,128,18,129,23,132,30,134,36,138,40,147,43,149,46,149,51,159,53,168,55,172,55,170,60,168,64,168,68,170,73,174,78,175,82,174,86,174,92,175,98,178,104,186,107,198,106,206,107,217,103,224,103,232,99,239,97,240,92,238,88,244,90,249,92,255,97,256,98,258,93,263,88,265,84,263,79,258,71,257,65,258,60,261,57,261,53,260,46,263,42,265,40,265,35,264,32,261,27,261,24,262,20,265,16,265,13,263,9,263,6,263,4,262,2,261,0"/>
</svg>
</div>
Related
SVG get parent of an <image> referenced by <use>
I have an <svg> element which contains some <image> elements under <defs> tag, which are referenced by some <use> elements, like this: <svg xmlns="http://www.w3.org/2000/svg" ...> <defs> <image height="100%" id="test" width="100%" xlink:href="data:image/png;base64,..."/> </defs> <g transform="translate(111,222)"> <svg height="100" width="200" x="0" y="0"> <use xlink:href="#test"/> </svg> </g> </svg> I have a javascript function which iterates through the svg element, and at a certain point I get the image which is referenced by <use>. What I want to do is to get the height/width of the <svg> above <use> from the <image> element. If a try: image.parentElement I get the <defs> element, not the <use> element. How can I find the element which referenced the image? I can try to search the element which contains xlink:href="#test" , but is there a direct way to get this from the referenced <image> ? Sorry for the noob question, but I'm new to javascript/html.
No. There is not a way to get the <use> element directly from the <image> element.
SVG text line height displays differently within img tag
I have created an SVG image which I am using within our website. The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared with being displayed within an img tag. <img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" /> I am just trying to reduce the line height within the following SVG: https://jsfiddle.net/fahc2vvq/ I have to load in the XML version to edit the SVG within the website, Any ideas?
If you want a <foreignObject> to function correctly, you need to include a <body> element. Note: I've removed the image from this demo to make it smaller. <img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73mm" height="150mm" viewBox="0 0 73 150" version="1.1" id="svg4523"> <g id="layer1" transform="translate(0,-147)"> <foreignObject x="15" y="150" width="40" height="60"> <body> <p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p> </body> </foreignObject> </g> </svg>
scale content over entire svg
I'm trying to view a polygon with dynamic coordinates (retrieved from the server) inside a svg space. What i want to happen is that this polygon will be stretched over the entire svg, instead what i was able to achieve is either viewing a very small polygon or not viewing it at all. Here is my best attempt so far: <svg width="100%" viewBox="4980 4980 5020 5020"> <polygon points="5020,5000 5010,5017.320508075689 4990,5017.320508075689 4980,5000 4990,4982.679491924311 5010,4982.679491924311"></polygon> </svg>
The last two parameters of viewBox are width and height. <svg width="100%" height="100%" viewBox="4980 4980 40 40"> <polygon points="5020,5000 5010,5017.320508075689 4990,5017.320508075689 4980,5000 4990,4982.679491924311 5010,4982.679491924311"></polygon> </svg>
Two svgs next to each other horizontally
Is it possible to have multiple SVGs that are next to each other horizontally. I know that when you append a SVG in D3, it appends in below the previous SVG. But now I have the previous SVG on half the page, and I want to translate this SVG from below the previous SVG to the right of the previous SVG. I tried using the transform-->translate attribute on the second svg but it did not work:
var secondSVG= d3.select("#div1").append("svg").attr("width",960).attr("transform"),"translate(500, -500)");
In Chrome 24, IE10, and FF17 this jsFiddle worked as expected. The key seemed to be setting the width and height stylesheet properties.
HTML:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg2">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
CSS:
svg
{
width: 190px;
height: 190px;
}
Awhile back I wanted to do something similar, but I eventually settled on using a single svg element with two internal g elements, one of them transformed to the right. You can see the eventual finished product here.
General idea: Wrap each SVG in a div element that is displayed as inline-block. This works with the following approach that I personally like anyway. Set the width and height attributes of the SVGs to 100%. "Inner impact": Specify the size of the drawing area (which the units of the elements in the SVGs, like circle, relate to) with the viewBox attribute; this typically goes together with the preserveAspectRatio attribute. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio "Outer impact": The SVGs will adapt to the size of their container. Style it (width and/or height) according to your wishes. Of course you need enough horizontal space. Minimal example: <div style="display: inline-block; width: 42%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet"> <circle cx="0" cy="0" r="39"> </svg> </div> <!-- Just a copy from above. Right of (not below) the previous SVG. --> <div style="display: inline-block; width: 42%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet"> <circle cx="0" cy="0" r="39"> </svg> </div>
embedding SVG in SVG
I couldn't find the way how to embed two SVGs into SVG document. I need to do it with ability of code which would manipulate with both child SVG-s, and would like to have independent coordinates on both of those areas. I don't like to do it in HTML, because I consider it too limiting comparing to SVG. Many thanks!
An SVG document fragment consists of any number of SVG elements contained within an ‘svg’ element. Source: http://www.w3.org/TR/SVG/struct.html#NewDocument Basically: <svg …> <svg id="a" …>…</svg> <svg id="b" …>…</svg> </svg>
<svg> ... <image x="..." y="..." width="..." height="..." xlink:href="path/to/your/file.svg" ></image> ... </svg>
One of solution is '[parent svg] - [g] - [child svg]' structure. <svg> <g transform="translate(-,-)"> <svg> ... </svg> </g> </svg> You can set the cordinate of child svg as transform(translate) of g element. demo: http://hitokun-s.github.io/old/demo/path-between-two-svg.html