I tried that code but "The text to be referenced to" is never displayed on the screen, maybe it's because xlink is deprecated; would you know how to update that code to make it working ? Or what function should I use instead of xlink:href ?
Thank you very much in advance :)
<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="Textref">
The text to be referenced to
</text>
</defs>
<text x="20" y="20" font-size="30" fill="#9d1d20" >
Inline text
</text>
<text x="20" y="40" font-size="30" fill="red" style="text-decoration:underline;">
<tref xlink:href="#Textref"/>
</text>
</svg>
The tref tag may not be supported by your browser. You would need a use tag:
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.0"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="Textref">
The text to be referenced to
</text>
</defs>
<text x="20" y="20" font-size="30" fill="#9d1d20" >
Inline text
</text>
<use x="20" y="40" href="#Textref" font-size="30" fill="red" style="text-decoration:underline;" />
</svg>
tref has been dropped from SVG 2 and no current browser supports it. Just put the text inline wherever you want it.
<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<text x="20" y="20" font-size="30" fill="#9d1d20" >
Inline text
</text>
<text x="20" y="40" font-size="30" fill="red" style="text-decoration:underline;">
The text to be referenced to
</text>
</svg>
Related
<?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.
This is my code:
<?xml version="1.0">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
<text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text>
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="10" height="10" fill="blue" />
</g>
</svg>
This gives me hello world and a rectangle. I would like to know how to position my rectangle relative to my text. I thought this would do the trick, but according to my code above the rectangle should sit on top of the text but it does not.
Edit: I tried this but it didn't change anything:
<?xml version="1.0">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="10" height="10" fill="blue" />
</g>
<text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text>
</svg>
Is this close to what you want?
<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
<rect x="0" y="0" width="100%" height="100%" fill="blue" />
<text id="t1" x="50%" y="50%" text-anchor="middle" dy="0.3em">Hello World</text>
</svg>
The correct value to use for dy, to get the text vertically centred, is font specific. You may have to tweak that value to match whichever font you choose. In my opinion, it is a more reliable alternative to other solutions like alignment-baseline etc.
Another Approach you can try! Maybe It will fit for you ...
p {
font-size: 42px;
}
p>svg {
width: 60px;
height: 60px;
display: inline-block;
position: relative;
top: 28px;
}
<div style="display:none">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 20 20" id="box">
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="12" height="12" fill="blue" />
</g>
</symbol>
</svg>
</div>
<p>
<svg>
<use xlink:href="#box"></use>
</svg> Hello World
</p>
I am trying to put the word "fox" inside this blue rectangle, but it just doesn't happen. What am I doing wrong here?
<html>
<body>
<svg width="400" height="200">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:0;fill-opacity:0.7;stroke-opacity:0.1">
<text fill="#44ffff" font-size="45" font-family="Verdana" x="150" y="96">fox</text>
</svg>
</body>
</html>
As pointed out in my comment, your XML is invalid. The well-formed XML
<svg width="400" height="200">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:0;fill-opacity:0.7;stroke-opacity:0.1" />
<text fill="#44ffff" font-size="45" font-family="Verdana" x="150" y="96">fox</text>
</svg>
works for me.
I am struggling with an svg to blur background under text on Google Chrome 36.0.1985.125 linux. The svg is like
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feGaussianBlur result="blurOut" in="BackgroundImage" stdDeviation="2" />
<feBlend in2="blurOut" in="SourceGraphic" mode="normal" />
</filter>
</defs>
<g enable-background="new">
<text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
</g>
</svg>
Fiddle: http://jsfiddle.net/2o2trpc1/
Thus I would like to blur "BACKGROUND" behind "text", but "text" does not appear at all. Can someone please look at this what I am doing wrong? Where can I check that the browser version supports filtering background image?
thanks a lot,
Balazs
You will have to work around the lack of BackgroundImage. There are multiple ways to do that, if your code is as simple as the fiddle you posted something like this could work:
<body>
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feGaussianBlur result="blurOut" stdDeviation="2" />
</filter>
</defs>
<g>
<text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24" filter="url(#blur)">BACKGROUND</text>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26">text</text>
</g>
</svg>
</body>
See fiddle.
Another option is to use <feImage xlink:href="#background"/> in the filter, instead of using BackgroundImage. This can bring in whatever element you want.
<body>
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="#background"/>
<feGaussianBlur stdDeviation="3" />
<feBlend in="SourceGraphic" mode="normal" />
</filter>
<text id="background" x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
</defs>
<g>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
</g>
</svg>
</body>
See fiddle.