<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="70.4094in" height="34.0787in"
viewBox="0 0 20000 10000" xml:space="preserve" color-interpolation-filters="sRGB" class="st238">
<defs>
<g id="text1">
<title> </title>
<v:textRect cx="0" cy="0" width="19.2" height="0"/>
<text x="0" y="0"> text to display </text>
</g>
</defs>
<g>
<use x="100" y="100" xlink:href="#text1"/>
<use x="200" y="200" xlink:href="#text1"/>
</g>
</svg>
In my code I'm using the same object twice with use and xlink, do you know how I could pass parameters with the xlink (for example the param for the text instead to display "text to display" ) ?
Please understand this question properly before marking as duplicate.
There are many questions like this one in StackOverflow, but my question is slightly different from those.
I have a chakra.svg file, whose code is this:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" id="b">
<circle cx="50" cy="50" r="45" stroke-width="2" stroke="blue" fill="none"/>
<script>
<![CDATA[
for(i=0;i<24;i++)
{
var l=document.createElementNS("http://www.w3.org/2000/svg","line");
l.setAttributeNS(null,"x1","50");
l.setAttributeNS(null,"y1","50");
l.setAttributeNS(null,"x2","5");
l.setAttributeNS(null,"y2","50");
l.setAttributeNS(null,"stroke-width",2);
l.setAttributeNS(null,"stroke","blue");
l.setAttributeNS(null,"transform","rotate("+(i/24*360)+",50,50)");
document.querySelector("#b").appendChild(l);
}
]]>
</script>
</svg>
The output is rendered as expected, like this:
I have another file, India_flag.svg whose code is this:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="170" height="100">
<rect x="0" y="0" height="33" width="180" fill="#f93"/>
<rect x="0" y="33" height="34" width="180" fill="white"/>
<rect x="0" y="67" height="33" width="180" fill="green"/>
</svg>
The output of this file is also rendered as expected:
But, now the problem is, when I am trying to insert the chakra.svg file inside the India_flag.svg file using the image tag like this:
<image xlink:href="chakra.svg" x="70" y="35" height="30" width="30"/>
The output should have been that the wheel is placed at the centre of the flag, but I am getting this output:
The chakra.svg file is rendered, but the JavaScript code in that file did not run, only the circle is rendered. What am I doing wrong and how to achieve my objective?
SVG documents when loaded inside an <image> tag (or HTML <img> for that matter) are sand-boxed and won't allow the execution of scripts, nor will they be interactive (i.e no user-event).
To circumvent that, you need an other way to append you svg. The simple solution would be to copy its markup directly in the main one:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="170" height="100">
<rect x="0" y="0" height="33" width="180" fill="#f93"/>
<rect x="0" y="33" height="34" width="180" fill="white"/>
<rect x="0" y="67" height="33" width="180" fill="green"/>
<svg x="70" y="35" height="30" width="30" id="b" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke-width="2" stroke="blue" fill="none"/>
<script>
<![CDATA[
for(i=0;i<24;i++) {
var l=document.createElementNS("http://www.w3.org/2000/svg","line");
l.setAttribute("x1","50");
l.setAttribute("y1","50");
l.setAttribute("x2","5");
l.setAttribute("y2","50");
l.setAttribute("stroke-width",2);
l.setAttribute("stroke","blue");
l.setAttribute("transform","rotate("+(i/24*360)+",50,50)");
document.querySelector("#b").appendChild(l);
}
]]>
</script>
</svg>
</svg>
An other solution, would have been to do the inverse: load your flag image from the one with the script: plnkr.
I have the following SVG file.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--<svg width="100%" height="500">-->
<svg id="deviceImage" class="DeviceImage" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" currentScale="1" width="3000px" height="1500px" oncontextmenu="return false">
<script type="text/ecmascript">
<![CDATA[
function ExmpleFunction(event, componentGroup)
{
alert('Hello World');
}
]]>
</script>
<defs>
<!-->>>TestShape>>>-->
<symbol id="TestShape">
<polygon points="1,1 650,1 630,175 21,175"></polygon>
</symbol>
<!--<<<TestShape<<<-->
</defs>
<!--TestShape-->
<g id="p1" transform="translate(50, 35)" visibility="visible">
<use id="p2Basic" xlink:href = "#TestShape"/>
</g>
<rect x="500" y="10" width="100" height="150" fill="blue"/>
<foreignObject x="0" y="0" width="200" height="250">
<div xmlns="http://www.w3.org/1999/xhtml">
<embed id="wert" src="TestModule-Basic.svg" type="image/svg+xml" />
</div>
</foreignObject>
</svg>
The aim is to embed another svg image which supports the internal script (so this can't be done as an image) so I am using foreignObject
When run the above code displays the test shape and the rectangle, but it does not display the svg image in the foreignObject.
By experimenting I discovered that if I remove the xmlns="http://www.w3.org/2000/svg" from the main SVG node, the svg image in the foreignObject is displayed but the test shape and rectangle are not displayed. I also see the text within the script tag as part of the image.
I obviously need to include the svg namespace but I am not sure how I get both to display?
All help appreciated!
I have an SVG image element in my code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>
The image mail-dark.png is "Black" in color now.
I need to change its color. For example say to "green".I have tried using css as
<style>
#svg_social-link {
fill: green;
}
</style>
But its not worked. Is there any way to do this.
AFAIK, You can not change the background color in a SVG image, you could do it if the image is the HTML code (out of SVG).
However you could do it in SVG with a workaround, using a rect as background:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="20" y="20" width="17" height="17" id="bk_rect" style="fill:#800000;"/>
<image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>
You can set the bk color inline or modify it using JS or CSS
$('#bk_rect').css('fill', '#aaaaaa');
I created JSFiddle: http://fiddle.jshell.net/7dcnZ/1/ To show it
I would like to create resolution independent SVG that uses <image> element. Is it possible to test for actual pixel ratio of the user agent? Please look at the example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
<defs>
<pattern id="test" patternUnits="userSpaceOnUse"
x="0" y="0" width="130" height="100"
viewBox="0 0 130 100" >
<IF PIXEL RATIO = 2>
<image xlink:href="test_2x.png" id="svg_1" height="100" width="130" y="0" x="0"/>
<ELSE>
<image xlink:href="test.png" id="svg_1" height="100" width="130" y="0" x="0"/>
<END IF>
</pattern>
</defs>
<rect id="rectangle" stroke="rgb(29, 29, 255)" fill="url(#test)" x="50" y="47" width="320" height="240" />
</svg>
I only have found Switch Element in the documentation but it doesn't seem to be very helpful since there is no "retina display" feature. Or is there? :)
You could use CSS media selectors to detect retina displays. Using the display property, you can switch the images on and off depending on the device.
I don't have an Apple retina device at hand to test, but I think something like this should work:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
<style type="text/css">
#media all {
#test_2x_png {display:none}
}
#media (-webkit-min-device-pixel-ratio: 2) {
#test_png {display:none;}
#test_2x_png {display:inline;}
}
</style>
<defs>
<pattern id="test" patternUnits="userSpaceOnUse"
x="0" y="0" width="130" height="100"
viewBox="0 0 130 100" >
<image xlink:href="test_2x.png" height="100" width="130" y="0" x="0" id="test_2x_png"/>
<image xlink:href="test.png" height="100" width="130" y="0" x="0" id="test_png"/>
</pattern>
</defs>
<rect id="rectangle" stroke="rgb(29, 29, 255)" fill="url(#test)" x="50" y="47" width="320" height="240" />
</svg>