Related
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 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>
I have an SVG element loaded from an <object> tag. This file was made externally so there are all sorts of transforms applied to it.
Additionally, I am resizing the entire element with CSS.
In my SVG image I have a <path> mask in the <defs> section and an identical one at the root of the SVG element.
Frustratingly, the mask is not where I want it to be and I am not sure why. As a test, I created an identical path at the bottom of my SVG, (not in a group or anything), and the paths do not line up (even when everything in the paths is the exact same.
Is there some way / reason that two elements with the exact same paths and transformations would not be identical?
Are coordinates in the <defs> section treated differently?
Here is a simplified example of my code (the whole code is below this):
<object type="image/svg+xml" data="http://localhost:8000/assets/imagesvg" id="logo" height="160.75623mm" width="163.64865mm">
<svg viewBox="0 0 579.85743 569.60867">
<defs id="defs4">
<mask id="mask3" x="0" y="0" width="100" height="100">
<path xmlns="http://www.w3.org/2000/svg" id="my-path2" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</mask>
</defs>
<path xmlns="http://www.w3.org/2000/svg" id="my-path" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</svg>
</object>
As you can see the two paths are identical, so I am not sure what the issue is.
Both elements are in the root of the SVG element so I would assume they are the same. The path size is correct, but it looks like the origin is shifted up and to the left for the <defs><mask> element. The amount by witch the paths differ are the same when the SVG element is resized with CSS.
Full SVG
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" viewBox="0 0 579.85743 569.60867" height="160.75623mm" width="163.64865mm" inkscape:version="0.91 r13725" sodipodi:docname="knob.svg" inkscape:label="Layer">
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1536" inkscape:window-height="841" id="namedview12" showgrid="false" inkscape:zoom="0.44851478" inkscape:cx="-150.69173" inkscape:cy="425.05921" inkscape:window-x="3832" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="layer3" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
<defs id="defs4">
<linearGradient inkscape:collect="always" id="linearGradient6371">
<stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop6373"/>
<stop style="stop-color:#000000;stop-opacity:0;" offset="1" id="stop6375"/>
</linearGradient>
<radialGradient inkscape:collect="always" xlink:href="#linearGradient6371" id="radialGradient6377" cx="185.47202" cy="377.83094" fx="185.47202" fy="377.83094" r="111.97905" gradientTransform="matrix(1,0,0,0.60178603,0,150.45756)" gradientUnits="userSpaceOnUse"/>
<mask id="mask3" x="0" y="0" width="100" height="100">
<path id="my-path2" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</mask>
</defs>
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:groupmode="layer" id="layer3" mask="url(#mask3)" inkscape:label="Main Layer" style="display:inline" transform="translate(-73.492973,-42.944066)">
<g transform="translate(11.564708,-126.05435)" style="display:inline" id="layer4">
<path id="dialfill" d="m 211.42857,680.93363 67.14286,-92.85714 -64.28572,-62.85714 -18.57142,-78.57143 17.14285,-78.57143 82.85715,-75.71429 67.14285,-7.14285 57.14286,11.42857 57.14286,44.28571 27.14285,48.57143 7.14286,64.28572 L 500,510.93363 l -34.28571,44.28572 -18.57143,18.57143 75.71428,98.57142 68.57143,-70 35.71429,-85.71428 7.14285,-88.57143 L 620,353.79078 c 0,0 -72.85714,-117.14286 -97.14286,-127.14286 -24.28571,-10 -57.14285,-34.28572 -57.14285,-34.28572 l -102.85715,-22.85714 -82.85714,10 -111.42857,61.42857 c 0,0 -88.57143,125.71429 -84.285716,140 4.285715,14.28572 -5.714285,111.42857 -5.714285,111.42857 l 25.714281,78.57143 48.57143,67.14286 58.57143,47.14286 z" style="fill:#f3fc00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" inkscape:connector-curvature="0"/>
</g>
<rect style="display:inline;fill:url(#radialGradient6377);fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" id="rect-mask" width="222.9581" height="133.77486" x="73.992973" y="310.94351"/>
<g style="display:inline" id="layer1" transform="translate(11.564708,-121.59518)">
<circle r="277.14285" cy="449.50507" cx="357.14285" id="outerRim" style="fill:none;fill-rule:evenodd;stroke:#00f000;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
<circle r="158.57143" cy="445.21933" cx="355.71429" id="path4153" style="fill:none;stroke:#00f000;stroke-width:15;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
<path id="path4155" d="M 285.71429,586.64792 211.42857,692.3622" style="fill:none;fill-rule:evenodd;stroke:#00ff00;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" inkscape:connector-curvature="0"/>
<path id="path4157" d="m 448.57143,575.21935 82.85714,97.14285" style="fill:none;fill-rule:evenodd;stroke:#00ff00;stroke-width:15;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" inkscape:connector-curvature="0"/>
</g>
</g>
<path id="my-path" stroke-width="15" fill="none" stroke="#f0f" d="M 325.13558948214785 96.53577318284954 A 213.26045386528068 213.26045386528068 0 1 0 309.20001220703125 522.4604660723119" transform="matrix(0.938091, 0, 0, 0.938091, -0.128913, -0)"/>
</svg>
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.
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>