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.
Related
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>
This question already has answers here:
SVG data image not working as a background-image in a pseudo element
(4 answers)
Closed 3 years ago.
The following HTML code renders me a pattern that contains an image of type .svg inside another SVG.
<html>
<body>
<svg width="0px" height="0px">
<defs>
<pattern id="saint1729" patternUnits="userSpaceOnUse" width="8" height="8" fill="#ff7156">
<image xlink:href="http://saint1729.me/tiny-checkered-pattern.svg" x="0" y="0" width="8" height="8" />
</pattern>
</defs>
</svg>
<div>
<svg width="240" height="16">
<path d="M0 0 H240 V16 H0 Z" fill="url(#saint1729)"/>
</svg>
</div>
</body>
</html>
When I changed the image attribute href inside pattern to direct SVG tag (which is coming from the same URL), I don't see anything rendered. Here's the code for this scenario.
<html>
<body>
<svg width="0px" height="0px">
<defs>
<pattern id="saint1729" patternUnits="userSpaceOnUse" width="8" height="8" fill="#ff7156">
<image xlink:href="<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><g fill='#c82c0e' fill-opacity='1'><path fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/></g></svg>" x="0" y="0" width="8" height="8" />
</pattern>
</defs>
</svg>
<div>
<svg width="240" height="16">
<path d="M0 0 H240 V16 H0 Z" fill="url(#saint1729)"/>
</svg>
</div>
</body>
</html>
What is the difference between the two? How to make the second approach work?
I am using Google Chrome browser.
However this is working. You need to encode the svg. I use this SVG encoder. Also please read this post: Optimizing SVGs in data URIs
<svg width="0px" height="0px">
<defs>
<pattern id="saint1729" patternUnits="userSpaceOnUse" width="8" height="8" fill="#ff7156">
<image xlink:href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23c82c0e' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E" x="0" y="0" width="8" height="8" />
</pattern>
</defs>
</svg>
<div>
<svg width="240" height="16">
<path d="M0 0 H240 V16 H0 Z" fill="url(#saint1729)"/>
</svg>
</div>
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>
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title></title>
</head>
<style>
svg{
overflow:hidden;
}
defs:hover{
transform:scale(1.2);
}
</style>
<body style="background:url(http://namonitore.ru/uploads/catalog/znamenitosti/karolina_kurkova__i_devushki_v_bikini_1280.jpg); background-size:cover;">
<svg width="400" height="240">
<polygon points="10 220, 10 10, 280 10,380 220"
style="fill:green; stroke:green; stroke-width:3; opacity="1" />
</svg>
<svg width="400" height="240" style="position:relative; left:-120px;">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240">
<image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/>
</pattern>
</defs>
<polygon points="110 220,10 10,380 10,380 220"
style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" />
</svg>
</body>
</html>
It is necessary that when you hover over the girls , the effect was as if with background-position.
I do not know much English , but ask longer who.
how to make the zoom effect when you hover over the image of girls ?
If I understand your problem correctly then you should add a class to the polygon that's next to the <defs> element, add a class and use css on that polygon. For
example:
<svg width="400" height="240" style="position:relative; left:-120px;">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240">
<image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/>
</pattern>
</defs>
<polygon class="girls" points="110 220,10 10,380 10,380 220"
style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" />
</svg>
And then in your CSS instead of:
defs:hover{
transform:scale(1.2);
}
Do this:
polygon.grils:hover{
transform:scale(1.2);
}