How to access style properties of externally insert svg file? - javascript
Here I can access the style of the svg:
svg {
fill: skyblue;
}
<svg viewBox="0 0 100 100" width="500px" height="500px"
xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
<path d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z"/>
</svg>
But its style is not changed when svg is added as external file:
img {
fill: skyblue;
}
/* etc. Not working
img > svg {
fill: skyblue;
}
*/
<img src="brackets.svg" width="500px" height="500px">
Or; Can I somehow use the css root variable in the svg file? e.g. <svg fill="var(--textColor)" > </svg>
You can use a <use> element instead.
Give your path element an unique id and strip all fill attributes:
Svg markup
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>
Use element in html
Use elements support external svg files.
<svg>
<use href="icon.svg#icon" style="fill:red" />
</svg>
So you don't need to inline your assets/icons svg (some legacy browsers might still have issues with external svgs referenced in use)
Example (inlined svg just for circumventing CORS issues)
<svg style="display:none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>
<p>
<svg>
<use href="#icon" style="fill:red" />
</svg>
<svg>
<use href="#icon" style="fill:green" />
</svg>
</p>
Multiple icons
When using icons containing multiple elements (like in feather-icons library) I strongly recommend wrapping each icon definition in a <symbol>element.
This way you can have icons with different viewBox attributes:
button{
background:#999;
border:none;
font-size:2em;
border-radius:0.3em;
padding:0.3em;
color:#fff;
}
.icon-use{
display: inline-block;
width:1em;
height:1em;
font-size:1em;
color:inherit;
vertical-align:-0.1em;
}
.icon-green{
color:green
}
<button type='button'>
Download
<svg class="icon-use">
<use href="#icon-download" />
</svg>
</button>
<button type='button'>
Download .xls
<svg class="icon-use icon-green">
<use href="#icon-download" />
</svg>
</button>
<button type='button'>
Download .docx
<svg class="icon-use" style="color:blue">
<use href="#icon-arrow" />
</svg>
</button>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</symbol>
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</symbol>
</svg>
Related
External SVG file in clippath
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>
SVG Text to be placed on a ring
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>
SVG path overflow and centered dynamically
I have the SVG path curve that should be centered every time on the center icons, even I add the text below icon on above them, how to hold this line to the center of the icon. Should I draw it as one path or as several paths? I've hot now such picture codepen .I use foundation zurb 6.Is it possible to hold the line to svg cordinate with Javascript and make it responsive? Or Snap.svg I try to achieve this one : <div class="wrapper"> <div class="container"> <div style="text-align:center"> <h1> The text should not shift the line</h1></div> <div class="row columns"> <div class="svg-container"> <!-- The line --> <svg class="red svg svg-1 svg-2" preserveAspectRatio="none"> <!--лишню лінію викинути--> <path d="M 50 0 l 0 27 q 0 50 50 50 l 1000 0 q 50 0 50 50 l 0 150" stroke="#d4d4d4" stroke-width="1" fill="none" /> <path d="M 50 0 l 0 27 q 0 50 50 50 l 2000 0 " stroke="#d4d4d4" stroke-width="1" fill="none" /> </svg> <svg class="icon-svg" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="75.001px" height="75px" viewBox="0 0 75.001 75" enable-background="new 0 0 75.001 75" xml:space="preserve"> <switch> <g i:extraneous="self"> <g> <!-- circle for closing LINES 1 --> <circle cx="37.5" cy="37.5" r="36" stroke="black" stroke-width="0" fill="gray" /> <!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!--> <path fill="#FFD100" d="M64.017,10.984C56.934,3.9,47.517,0,37.5,0S18.067,3.901,10.984,10.984S0,27.484,0,37.5 c0,10.017,3.901,19.433,10.984,26.517C18.067,71.1,27.483,75,37.5,75s19.434-3.9,26.517-10.982 c7.083-7.084,10.984-16.5,10.984-26.517C75.001,27.484,71.1,18.067,64.017,10.984z M72.001,37.5c0,2.656-0.308,5.264-0.889,7.791 l-6.286-7.793l6.278-7.823C71.69,32.212,72.001,34.832,72.001,37.5z M13.105,13.105C19.622,6.588,28.285,3,37.5,3 s17.879,3.588,24.396,10.105c3.739,3.739,6.509,8.188,8.195,13.04l-7.043,8.775c-5.706-8.429-15.305-13.585-25.547-13.585 S17.66,26.491,11.954,34.92L4.91,26.144C6.597,21.292,9.366,16.844,13.105,13.105z M61.151,37.5 c-5.063,8.144-14.045,13.166-23.65,13.166S18.914,45.645,13.851,37.5c5.063-8.144,14.045-13.166,23.65-13.166 S56.088,29.357,61.151,37.5z M3,37.5c0-2.669,0.311-5.289,0.896-7.827l6.279,7.824l-6.287,7.795C3.308,42.766,3,40.157,3,37.5z M61.896,61.896C55.379,68.412,46.715,72,37.5,72s-17.878-3.588-24.395-10.104c-3.749-3.75-6.522-8.211-8.208-13.078l7.053-8.742 c5.706,8.432,15.307,13.59,25.551,13.59s19.845-5.158,25.551-13.59l7.052,8.742C68.419,53.685,65.645,58.146,61.896,61.896z"/> <path fill="#FFD100" d="M37.501,26.833c-5.882,0-10.667,4.785-10.667,10.667c0,5.881,4.785,10.666,10.667,10.666 c5.881,0,10.666-4.784,10.666-10.666C48.167,31.619,43.382,26.833,37.501,26.833z M37.501,45.166 c-4.228,0-7.667-3.438-7.667-7.666c0-4.228,3.439-7.667,7.667-7.667s7.666,3.439,7.666,7.667 C45.167,41.728,41.729,45.166,37.501,45.166z"/> <path fill="#FFD100" d="M37.501,34.583c-1.608,0-2.917,1.309-2.917,2.917c0,1.608,1.309,2.916,2.917,2.916 c1.607,0,2.916-1.308,2.916-2.916C40.417,35.892,39.108,34.583,37.501,34.583z"/> </g> </g> </switch> </svg> <svg class="icon-svg" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74.963px" height="75px" viewBox="0 0 74.963 75" enable-background="new 0 0 74.963 75" xml:space="preserve"> <switch> <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1"> <i:pgfRef xlink:href="#adobe_illustrator_pgf"> </i:pgfRef> </foreignObject> <g i:extraneous="self"> <g> <!-- circle for closing LINES 2 --> <circle cx="37.5" cy="37.5" r="36" stroke="black" stroke-width="0" fill="gray" /> <!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!--> <path fill="#FFD100" d="M63.998,10.984C56.914,3.9,47.497,0,37.48,0S18.048,3.901,10.965,10.984 c-14.62,14.621-14.62,38.412,0,53.033C18.048,71.1,27.464,75,37.48,75s19.434-3.9,26.518-10.983 C78.618,49.396,78.618,25.605,63.998,10.984z M61.877,61.896C55.36,68.412,46.696,72,37.48,72 c-9.215,0-17.878-3.589-24.395-10.104c-13.45-13.451-13.45-35.339,0-48.791C19.603,6.588,28.266,3,37.48,3 c9.216,0,17.88,3.588,24.396,10.105C75.327,26.557,75.327,48.445,61.877,61.896z"/> <path fill="#FFD100" d="M34.736,37.307H17.043c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5h17.693 c0.828,0,1.5-0.671,1.5-1.5V38.806C36.236,37.978,35.564,37.307,34.736,37.307z M33.236,55H18.543V40.306h14.693V55z"/> <path fill="#FFD100" d="M57.92,37.307H40.227c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5H57.92 c0.828,0,1.5-0.671,1.5-1.5V38.806C59.42,37.978,58.748,37.307,57.92,37.307z M56.42,55H41.727V40.306H56.42V55z"/> <path fill="#FFD100" d="M47.828,33.667V15.974c0-0.829-0.672-1.5-1.5-1.5H28.635c-0.828,0-1.5,0.671-1.5,1.5v17.693 c0,0.829,0.672,1.5,1.5,1.5h17.693C47.156,35.167,47.828,34.496,47.828,33.667z M44.828,32.167H30.135V17.474h14.693V32.167z"/> </g> </g> </switch> </svg> <svg class="icon-svg" version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74.963px" height="75px" viewBox="0 0 74.963 75" enable-background="new 0 0 74.963 75" xml:space="preserve"> <switch> <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1"> <i:pgfRef xlink:href="#adobe_illustrator_pgf"> </i:pgfRef> </foreignObject> <g i:extraneous="self"> <g> <!-- circle for closing LINES 3 --> <circle cx="37.5" cy="37.5" r="36" stroke="black" stroke-width="0" fill="gray" /> <!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!--> <path fill="#FFD100" d="M63.998,10.984C56.914,3.9,47.497,0,37.48,0S18.048,3.901,10.965,10.984 c-14.62,14.621-14.62,38.412,0,53.033C18.048,71.1,27.464,75,37.48,75s19.434-3.9,26.518-10.983 C78.618,49.396,78.618,25.605,63.998,10.984z M61.877,61.896C55.36,68.412,46.696,72,37.48,72 c-9.215,0-17.878-3.589-24.395-10.104c-13.45-13.451-13.45-35.339,0-48.791C19.603,6.588,28.266,3,37.48,3 c9.216,0,17.88,3.588,24.396,10.105C75.327,26.557,75.327,48.445,61.877,61.896z"/> <path fill="#FFD100" d="M34.736,37.307H17.043c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5h17.693 c0.828,0,1.5-0.671,1.5-1.5V38.806C36.236,37.978,35.564,37.307,34.736,37.307z M33.236,55H18.543V40.306h14.693V55z"/> <path fill="#FFD100" d="M57.92,37.307H40.227c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5H57.92 c0.828,0,1.5-0.671,1.5-1.5V38.806C59.42,37.978,58.748,37.307,57.92,37.307z M56.42,55H41.727V40.306H56.42V55z"/> <path fill="#FFD100" d="M47.828,33.667V15.974c0-0.829-0.672-1.5-1.5-1.5H28.635c-0.828,0-1.5,0.671-1.5,1.5v17.693 c0,0.829,0.672,1.5,1.5,1.5h17.693C47.156,35.167,47.828,34.496,47.828,33.667z M44.828,32.167H30.135V17.474h14.693V32.167z"/> </g> </g> </switch> </svg> </div> </div> </div> </div>
svg!! change text on load
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.
there's a 'use' tag on the page, but I cannot find the 'def' tag
I saw those html code on this website: <a href="https://medium.com/" class="siteNav-logo" data-log-event="home"> <svg viewBox="0 0 45 45" width="45" height="45" class="svgIcon svgIcon--logoNew svgIcon-size--45px"> <use class="svgIcon-use svgIcon-use--part0" xlink:href="#svg-logoNew-45px-p0"></use> <use class="svgIcon-use svgIcon-use--part1" xlink:href="#svg-logoNew-45px-p1"></use> <use class="svgIcon-use svgIcon-use--part2" xlink:href="#svg-logoNew-45px-p2"></use> <use class="svgIcon-use svgIcon-use--part3" xlink:href="#svg-logoNew-45px-p3"></use> </svg> <svg viewBox="0 0 95 45" width="95" height="45" class="svgIcon svgIcon--logoWordmarkNew svgIcon-size--95x45px"> <use class="svgIcon-use svgIcon-use--part0" xlink:href="#svg-logoWordmarkNew-95x45px-p0"></use> </svg><span class="u-textScreenReader">Homepage</span> </a> Usually when you have a use tag inside svg, you need to use the defs tag to specify the specific shape that use is referred to. Just as follows: <svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg> But I couldn't find any defs tag on the page, so where does the browser find these external svgs(#svg-logoNew-45px-p0, #svg-logoNew-45px-p1, etc)?
They use the <symbol> tag instead of <defs>: <div style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg"> <symbol viewBox="-17 18 45 45" id="svg-logoNew-45px-p0">...</symbol> </svg> </div>