Just wanted to ask is there any way of changing the svg text on load.
Standard SVG examples work just fine.
$(document).ready(function(){
document.getElementById('mySVGText').textContent = 'new_value';
});
it works on this svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" id="mySVG">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text id="mySVGText" name="textName" x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
but seems like this svg doesnt allow me to getElementById and change the text:
<svg version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
viewBox="0 0 489 489"
style="enable-background:new 0 0 489 489;"
xml:space="preserve"
>
<text id="mySVGText" name="textName" x="160" y="400" font-size="280" text-anchor="middle" fill="blue">SVG</text>
<g>
<path style="fill:white" d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
</g>
</svg>
Any help would be appreciated.
So that this doesn't show up as unanswered:
The problem was that there were two elements with the id mySVGText on the page. document.getElementById assumes that each id on the page is unique, so it can have unexpected behavior when they aren't.
Related
I have SVG file that i created it in photoshop. I would like to use it in my html page with clip-path property. I am trying to implement it as using clip-path:url(#mysvg); and paste the svg code to my html page. But i does not work. How can i do that?
My purpose is like this with css:
Here is the .svg file:
https://svgshare.com/i/dfw.svg
Here is the svg code
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 506" >
<image id="image" class="image__svg-image" width="100%" height="100%" clip-path="url(#mask)" x="-100px" xlink:href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1920" viewBox="0 0 1920 1920">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<defs>
<style>
.cls-1 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</svg>
In this example the viewBox of the <svg> is 100 in width and the image also takes up 100% of the width. So, no matter the actual width of the image it will always fill the entire SVG.
The <clipPath> fits in the size of the viewBox of the <svg> that holds the image. I know the width is 100, so I made the clippath 70 in height and width plus the extra height that the rotation takes up. This matches kind of the height of the images (unknown at this point).
I replaced the content of the <clipPath>. It is more "transparent" what the clip path does and easier to manipulate.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(15 0) rotate(-10 60 0)">
<rect width="50" height="50" />
<rect x="20" y="20" width="50" height="50" />
<rect x="20" width="50" height="50" rx="10" />
<rect y="20" width="50" height="50" rx="10" />
</clipPath>
</defs>
</svg>
Update
OP asks if the original path can be used as a clip-path. It can, but the viewBox needs to be modified accordingly. So, if the viewbox 0 0 2300 1800 is used the path fits the image.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2300 1800" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(350 0)">
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</clipPath>
</defs>
</svg>
Update
To "path" or not to "path", that is the question. This third example is a better solution. The path is simpler and there are not that many child elements in <clipPath>.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(2 0) rotate(-10 7 0)">
<path d="M 0 0 L 6 0 A 1 1 90 0 1 7 1 L 7 7 L 1 7 A 1 1 90 0 1 0 6 Z"/>
</clipPath>
</defs>
</svg>
Update
This fourth example is using the original path, BUT defined in a <clipPath> and used as an external reference in CSS. The external SVG file have the following content:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="mask" transform="translate(350 0)">
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</clipPath>
</defs>
</svg>
But for this example I replace the URL (like https://svgshare.com/i/dfw.svg#rect) to the SVG file with a data URI.
svg>image {
clip-path: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJtYXNrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAgMCkiPgogICAgICA8cGF0aCBpZD0icmVjdDEiIGNsYXNzPSJjbHMtMSIgZD0iTTEzMywzMzMuNjM3TDE0MjYuMDUsMTcxLjI2NWExNTcuNTU3LDE1Ny41NTcsMCwwLDEsMTc1Ljk5LDEzNi42NDdsMTU3LjkzLDEyNTYuNUw0NjYuOTI5LDE3MjYuNzlhMTU3LjU3NCwxNTcuNTc0LDAsMCwxLTE3Ni0xMzYuNjVaIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+#mask');
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2300 1800" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" />
</svg>
I want svg text to be placed on a ring. Is it possible to wrap it around? Any workarounds please? I have tried transform matrix, but I am not able to do with it.
Example of ring image
You can convert a circle into a path. I used Inkscape for that. So, here is a basic example:
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<path id="MyPath" fill="none" stroke="red"
d="M 50,95 A 45,45 0 0 1 5,50 45,45 0 0 1 50,5 45,45 0 0 1 95,50 45,45 0 0 1 50,95 Z" />
</defs>
<text textLength="280">
<textPath href="#MyPath">This is your text</textPath>
</text>
</svg>
Update
Maybe I misunderstood the question, so here is the new version. I'm not satisfied with the "skewing" if the text. I will update this answer later.
text {
font-size: 8px;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<path id="MyPath" fill="none" stroke="red"
d="M 46.326016,82.135999 C 75.229867,67.395261 78.467889,35.580206 78.467889,35.580206" />
</defs>
<image width="100" height="100" href="data:image/jpeg;base64,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"/>
<text textLength="50">
<textPath class="text" href="#MyPath">This is your text</textPath>
</text>
</svg>
Adding a Ring Bitmap to SVG Using <image>
Open the SVG file in a vector editor and create a path for the text
as #enxaneta comments:
You can use the ring inage inside an svg element. You will need to
draw a path where you want to put your text. Next you use this path as
a textPath inside the text element.
below is full code:
.container {
width:60vw;
height:60vh;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1181 1181">
<image xlink:href="https://i.stack.imgur.com/5pn89.jpg" id="image2" height="100%" width="100%"/>
<path id="RingPath" d="M 286.49258,567.98094 C 326.93719,456.93269 377.70892,383.63001 427.86229,316.51801 534.88572,173.30617 639.45611,129.74376 639.45611,129.74376" fill="none" />
<text font-size="60px" font-weight="bold" fill="#826B28">
<textPath href="#RingPath">
SVG Text to be placed
</textPath>
</text>
</div>
</svg>
I want to get the content of <g> tag .
I have tried getElementsByTagName('g') but it returns all <g> in an array , I want just content of outer <g> .
Here is my svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{font-family:'MyriadPro-Regular';}
.st1{font-size:117.1799px;}
.st2{fill:#17519D;}
.st3{fill:#E1232E;}
.st4{fill:#FAFDF9;}
</style>
<g>
<text transform="matrix(1 0 0 1 161.3171 175.1665)" class="st0 st1">text</text>
<g id="xe_o3c0">
<g id="xe_6ipa">
<g id="xe_zj3t">
<path id="xe_ce0v" pointer-events="bounding-box" class="st2" d=".4l1."/>
</g>
</g>
</g>
<image style="overflow:visible;" width="728" height="625" xlink:href="http://magento1924.inkxe.com//xetool/assets/magento1924_inkxe_com/images/designs/16.jpg" transform="matrix(0.3073 0 0 0.3073 35.3171 216.8965)">
</image>
</g>
</svg>
Why don't you use id as the selector?
getElementsById('xe_6ipa')
To get the first group element in the SVG, you can use:
getElementsByTagName('g').item(0)
document.querySelector('g') will return the first outer instance that it finds, and returns the node instead of a NodeList.
How to make this animated green bar visible only on circle?
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" xml:space="preserve">
<rect id="bar" y="10.962" fill="#02FF74" width="38" height="14.667">
Link to CodePen
With a clipPath you can create a mask.
you have a to create a <circle> inside a <defs> tag( it doesn't render element inside it and make it accessible )
you have to create a clipPath thate takes sizes and position from the circle using <use xlink:href="#circleID"...
you should add the attribute clipPath="url(#clipPathID)" to any element or group of element you want to mask.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<defs>
<circle id="SVGID_1_" cx="19" cy="19" r="19"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" from="40" to="-15" restart="always" dur="2s" attributeName="y" calcMode="linear" additive="replace" accumulate="none" repeatCount="indefinite">
</animate>
</rect>
<g clip-path="url(#SVGID_2_)">
<path d="M19,4.191c8.166,0,14.809,6.643,14.809,14.809S27.166,33.809,19,33.809S4.191,27.165,4.191,19S10.834,4.191,19,4.191
M19,0C8.508,0,0,8.507,0,19s8.508,19,19,19c10.493,0,19-8.507,19-19S29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309S21.928,24.309,19,24.309S13.691,21.927,13.691,19S16.072,13.691,19,13.691
M19,9.5c-5.246,0-9.5,4.253-9.5,9.5s4.254,9.5,9.5,9.5s9.5-4.253,9.5-9.5S24.246,9.5,19,9.5L19,9.5z"/
</g>
</g>
</g>
</svg>
Just edited to show the animated element just inside the black fill of your circles. The process is the same of the previous example, but now The shape of the mask path has been created copying the d=".." attribute value from both black circles:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200" height="200" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<g>
<path d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809c-8.166,0-14.809-6.645-14.809-14.809
C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19c10.493,0,19-8.508,19-19
C38,8.507,29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19
C13.691,16.073,16.072,13.691,19,13.691 M19,9.5c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5
c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809
c-8.166,0-14.809-6.645-14.809-14.809C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19
c10.493,0,19-8.508,19-19C38,8.507,29.493,0,19,0L19,0z M19,13.691c2.928,0,5.309,2.381,5.309,5.309
c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19C13.691,16.073,16.072,13.691,19,13.691 M19,9.5
c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" attributeName="y" dur="2s" restart="always" to="-15" from="40">
</animate>
</rect>
</g>
</g>
</svg>
I am creating a custom map that is drawn in an SVG. I want to add a polygon to this map,
however after adding the polygon it is not drawn. If I paste the complete page into an .html file and open it, it does show (http://peterelzinga.eu/map/test.html).
The code for adding the polygon to my SVG:
var svg = file_get_contents("18/135160/86183.svg");
var parser = new DOMParser();
var data = parser.parseFromString(svg, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute ("x", d);
data.setAttribute ("y", e);
document.getElementById('front').appendChild(data);
The SVG element after adding the polygon:
<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
<g id="back">
<image xlink:href="12/2110/1345.png" x="0" y="0" width="256" height="256"></image>
</g>
<g id="front">
<g width="256" height="256" x="0" y="0">
<polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="256,85.333 209,100.667 230.334,158.334 143,194.334 160.667,248.667 221.667,223.667 256,241.334 " onclick="alert('St Jansdal')"></polyline>
</g>
</g>
</svg>
Does anyone know why this happens?
From Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
You should specify the content type as "image/svg+xml" to get a SVGDocument.
The problem is that your generated nodes are not SVG nodes, but XML nodes.
I had a similar problem solved by switching from createElement to createElementNS. See answer: jquery's append not working with svg element?
Why the above won't work is still a mistery to me. However, i did manage to resolve the problem by using the following solution:
The javascript function to load and add an new svg element - which contains our polyline - to the main element:
var api = new XMLHttpRequest;
api.open("GET", a+"/"+b+"/"+c+".svg", false);
api.send("");
if( api.status == 200 ) {
var parser = new DOMParser();
var data = parser.parseFromString(api.responseText, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute("x", d);
data.setAttribute("y", e);
document.getElementById('front').appendChild(data);
}
Now instead of only having the polyline element in the .svg file, I have put a complete svg element in the file:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline fill="#FFFFFF" points="0,97 45,81.333 51.667,100.667 13.667,117.333 31,164 142.167,119.5 127.167,75.001
172.667,53.341 152.5,0 0,0 "/>
</svg>
And this does work. By setting the X and Y values of the I can position the svg in the correct spot so the polyline is drawn in the right place.
The endresult:
<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
<g id="back">
<image xlink:href="18/135160/86183.png" x="0" y="0" width="256" height="256"></image>
<image xlink:href="18/135161/86183.png" x="256" y="0" width="256" height="256"></image>
<image xlink:href="18/135160/86184.png" x="0" y="256" width="256" height="256"></image>
<image xlink:href="18/135161/86184.png" x="256" y="256" width="256" height="256"></image>
</g>
<g id="front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline name="St. Jansdal" fill="#FFFFFF" points="256,84.75 209,100.75 230.75,157.5 142.5,194.25 160.75,248.5 221.75,223.75 256,241 "></polyline>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="256" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline name="St. Jansdal" fill="#FFFFFF" points="0,85.336 6.333,82.669 44,180.336 86,200.669 135.333,181.002 155.667,138.669 136.667,82.669 190,63.669 202,94.336 256,76.002 256,137.336 219.333,151.336 184.333,219.669 188.333,228.669 231.333,252.669 256,243.336 256,256 30,256 0,240.669 "></polyline>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="256" y="256" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline name="St. Jansdal" fill="#FFFFFF" points="31.25,0 78.5,24 82.75,29.75 82.75,34.75 81.5,40 74.5,52.5 0,80.75 0,134.25 64.25,110 87.25,120 120.75,207.5 133.5,212.25 133.5,206 139.25,199.75 150,197.75 154,198.75 162,202.25 165.25,191.5 122.5,76.25 129.5,61.75 135.25,55 138.75,53.25 141.5,53.25 144.5,53.75 235.25,93.75 239.5,103.75 256,97.75 256,0 "></polyline>
</svg>
</g>
</svg>