SVG inside Mozilla/XUL app: title/tooltip is not displayed - svg

I wrote a xul application where a SVG fragment is embedded in a XUL element.
(...)
<scrollbox style='overflow:auto;' flex="1" pack="center">
<svg:svg version="1.1" baseProfile="full" width="100" height="100" id="drawingArea">
<svg:rect width="100" height="100" style="fill:red;" title="hello"/>
</svg:svg>
</scrollbox>
(...)
The image is displayed but the tooltip 'Hello' is not displayed on mouseover.
With the standalone svg file:
<?xml version="1.0"?>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="10" height="2000" id="drawingArea">
<svg:rect width="100" height="100" style="fill:red;" title="xxx"/>
</svg:svg>
the tooltip is displayed in firefox.
Is there a way to show those tooltips in xul ?
Thanks.

Related

How to pass paremeters with xlink:href in SVG format?

<?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" ) ?

How to include SVG within an SVG document which has JavaScript code?

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.

SVG Foreign Object not displaying with SVG Namespace

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!

How to change the color of an embeded SVG image

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

How to create an SVG with support of more than one Pixel Ratio?

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>

Resources