Related
I have been given this svg file to add to a project, being new to SVG's I am sure I have missed something.
It seems to be fine until I add the stroke to change the colour, as soon as this is applied the stroke-width seems to increase.
I am not sure if this is related to the decimal places which I know can cause blurry lines but I don't think that is the issue here.
I have tried adding stroke to the g tag and also tried it on the path tag.
<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"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>
Yes it increases because the path is a shape, to change the color you have to use the "fill" attribute. Stroke adds a stroke around the shape and therefore enlarges the shape. Look at the example :
<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"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)" stroke="#f0f" stroke-width="3%">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</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"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)" fill="#f0f">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>
This is a noob question, and I spent 2 hrs solving this already. I have an anchor which has SVG and two span text inline. What I'm going to do is inline all the span text with SVG, but I have never reached it. I only made the first span inline with SVG, however for the second span I don't know how to place it under the first span. Can you guys help? :D
Anyway I did:
Making multiple lines of text inline with an image but It inline 1 span only.
/* Title and Subtitle logo */
svg {
filter: url(#Slogo)
}
.logoIcon {
vertical-align: top;
}
#media (max-width: 600px) {
a.navbar-brand span.head-title {
font-size: 16px;
font-weight: bolder;
vertical-align: top;
}
a.navbar-brand span.head-title::after {
content: '\A';
white-space: pre;
}
a.navbar-brand span.head-subtitle {
font-size: 10px;
font-weight: 400;
}
}
#media (min-width: 600px) {
a.navbar-brand span.head-title {
font-size: 20px;
font-weight: bolder;
vertical-align: top;
}
a.navbar-brand span.head-title::after {
content: '\A';
white-space: pre;
}
a.navbar-brand span.head-subtitle {
font-size: 14px;
font-weight: 400;
}
}
<a class="navbar-brand" style="margin-top:0" rel="tooltip" title="Brand" data-placement="bottom" href="<?= base_url() ?>">
<svg xmlns=" http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35pt" height="35pt" class="logoIcon" viewBox="0 0 150 150" version="1.2">
<defs>
<filter id="Slogo">
<feColorMatrix type="matrix" values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 " />
</filter>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 12.609375 -95.546875 L 67.578125 -95.546875 L 67.578125 0 L 12.609375 0 Z M 19.40625 -6.796875 L 60.78125 -6.796875 L 60.78125 -88.75 L 19.40625 -88.75 Z M 19.40625 -6.796875 " />
</symbol>
<symbol overflow="visible" id="glyph0-1">
<path style="stroke:none;" d="M 68.421875 -26.53125 C 68.421875 -17.90625 65.316406 -11.109375 59.109375 -6.140625 C 52.898438 -1.171875 44.265625 1.3125 33.203125 1.3125 C 23.003906 1.3125 13.984375 -0.601562 6.140625 -4.4375 L 6.140625 -23.265625 C 12.585938 -20.390625 18.046875 -18.363281 22.515625 -17.1875 C 26.984375 -16.007812 31.066406 -15.421875 34.765625 -15.421875 C 39.210938 -15.421875 42.625 -16.269531 45 -17.96875 C 47.375 -19.664062 48.5625 -22.191406 48.5625 -25.546875 C 48.5625 -27.421875 48.035156 -29.085938 46.984375 -30.546875 C 45.941406 -32.003906 44.40625 -33.410156 42.375 -34.765625 C 40.351562 -36.117188 36.226562 -38.273438 30 -41.234375 C 24.15625 -43.984375 19.773438 -46.617188 16.859375 -49.140625 C 13.941406 -51.671875 11.609375 -54.613281 9.859375 -57.96875 C 8.117188 -61.320312 7.25 -65.242188 7.25 -69.734375 C 7.25 -78.179688 10.113281 -84.820312 15.84375 -89.65625 C 21.570312 -94.5 29.492188 -96.921875 39.609375 -96.921875 C 44.566406 -96.921875 49.300781 -96.332031 53.8125 -95.15625 C 58.320312 -93.976562 63.039062 -92.320312 67.96875 -90.1875 L 61.4375 -74.4375 C 56.332031 -76.53125 52.113281 -77.988281 48.78125 -78.8125 C 45.445312 -79.644531 42.171875 -80.0625 38.953125 -80.0625 C 35.117188 -80.0625 32.175781 -79.164062 30.125 -77.375 C 28.082031 -75.59375 27.0625 -73.265625 27.0625 -70.390625 C 27.0625 -68.597656 27.472656 -67.035156 28.296875 -65.703125 C 29.128906 -64.378906 30.445312 -63.097656 32.25 -61.859375 C 34.0625 -60.617188 38.34375 -58.382812 45.09375 -55.15625 C 54.019531 -50.882812 60.140625 -46.601562 63.453125 -42.3125 C 66.765625 -38.019531 68.421875 -32.757812 68.421875 -26.53125 Z M 68.421875 -26.53125 " />
</symbol>
</g>
</defs>
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(87.059021%,67.059326%,53.729248%);fill-opacity:1;" d="M 139.300781 149.542969 L 10.386719 149.542969 C 5.078125 149.542969 0.75 145.21875 0.75 139.90625 L 0.75 10.992188 C 0.75 5.683594 5.078125 1.355469 10.386719 1.355469 L 139.300781 1.355469 C 144.613281 1.355469 148.9375 5.683594 148.9375 10.992188 L 148.9375 139.90625 C 148.9375 145.21875 144.613281 149.542969 139.300781 149.542969 Z M 139.300781 149.542969 " />
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 130.820312 72.535156 L 97.136719 42.921875 L 98.167969 87.742188 L 109.066406 77.109375 L 118.664062 97.703125 L 125.257812 94.609375 L 115.660156 74.058594 Z M 130.820312 72.535156 " />
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 118.664062 99.273438 C 118.488281 99.273438 118.308594 99.230469 118.128906 99.183594 C 117.722656 99.050781 117.410156 98.738281 117.230469 98.378906 L 108.574219 79.800781 L 99.289062 88.867188 C 98.84375 89.3125 98.167969 89.449219 97.585938 89.179688 C 97.003906 88.957031 96.644531 88.371094 96.601562 87.742188 L 95.566406 42.964844 C 95.566406 42.335938 95.925781 41.753906 96.464844 41.484375 C 97.046875 41.214844 97.722656 41.351562 98.167969 41.753906 L 131.851562 71.367188 C 132.300781 71.769531 132.480469 72.445312 132.300781 73.027344 C 132.121094 73.609375 131.582031 74.058594 130.953125 74.105469 L 117.992188 75.359375 L 126.648438 93.933594 C 127.007812 94.742188 126.695312 95.640625 125.886719 96 L 119.292969 99.09375 C 119.113281 99.230469 118.890625 99.273438 118.664062 99.273438 Z M 109.066406 75.539062 C 109.15625 75.539062 109.246094 75.539062 109.335938 75.585938 C 109.832031 75.675781 110.277344 75.988281 110.457031 76.480469 L 119.382812 95.640625 L 123.152344 93.890625 L 114.226562 74.6875 C 114 74.238281 114.046875 73.699219 114.269531 73.25 C 114.496094 72.800781 114.988281 72.535156 115.480469 72.445312 L 127.050781 71.277344 L 98.796875 46.421875 L 99.648438 84.066406 L 107.945312 75.941406 C 108.261719 75.71875 108.664062 75.539062 109.066406 75.539062 Z M 109.066406 75.539062 " />
<g style="fill:rgb(100%,100%,100%);fill-opacity:1;">
<use xlink:href="#glyph0-1" x="14.848997" y="122.254314" />
</g>
</g>
</svg>
<span class="head-title" style="">Brand Title</span>
<span class="head-subtitle" style="">Brand Subtitle</span>
</a>
I am trying to display Arabic text by replacing English words in span elements. But it interchanged by its words.
I have tried by adding direction, xml: lang, unicode-bidi to svg attributes. It changes to RTL but it did not changes order
Please refer this fiddles:
Expected output with english words modelOutput.
<!DOCTYPE html>
<html>
<head>
<title>SVG with english words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">Browsers</tspan><tspan
x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
Actual output actual.
<!DOCTYPE html>
<html>
<head>
<title>SVG with Arabic words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan
x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
I expect that Browsers will be replaced with متصفح ذكي. Similarly opera with ايفون.
Actual output image actual.
Expected output expect.
Can anyone help me to acheive this?
The problem arises because the sequence " : " has no defined direction. Unicode has a group of bidirectional control characters that help with the interpretation of such situations. If you insert a left-to-right mark between the كروم and the following interpunction, it is made clear everything that follows goes left-to-right.
While in HTML the mark could be written as , this does not work inside the SVG namespace, which is pure XML. There you have to use the numeric entity instead. The extra <tspan> I introduced is not strictly neccesary, but it makes reading of the code a bit easier - otherwise the apparent order on the screen would be a bit confusing.
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan><tspan> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
Wouldn't live be easier without bugs? Theoretically, that should be the solution, and in Chrome in fact it is. In Firefox, the width of a rtl <tspan> is computed wrong, and the following ltr part disappears to the right. The best workaround I can find is to change the layout a bit so that the percentage number appears right-aligned at the end of the second line:
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan><tspan text-anchor="end" x="107"> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
My Svg animation not working as my expectation in my page,The preview looks good, but it not work on my page. here is my svg code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="450" width="450" margin-top="20px">
<image x="0" y="0" width="450" height="450" xlink:href="https://test.creapowa.com/ke/data/User/Minty/home/desktop/Elastic/img/roundtripplain.svg"></image>
<defs>
<path id="basePath" d="M 120,150 A 280 500 0 0 1 320,145 L320 145 360 150 "></path>
<mask id="mask">
<use xlink:href="#basePath" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
</use>
</mask>
</defs>
<circle r="4" cx="120" cy="150" fill="#c86706"></circle>
<circle fill="#c86706" cy="150" cx="360" r="4"></circle>
<use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask)"></use>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
<animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#basePath"></mpath>
</animatemotion>
</path>
<defs>
<path id="basePath1" d="M 330,330 A 500 1500 0 0 1 120,330"></path>
<mask id="mask1">
<use xlink:href="#basePath1" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
</use>
</mask>
</defs>
<circle r="4" cx="120" cy="330" fill="#c86706"></circle>
<circle fill="#c86706" cy="330" cx="330" r="4"></circle>
<use xlink:href="#basePath1" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask1)"></use>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
<animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#basePath1"></mpath>
</animatemotion>
</path>
</svg>
But in my page( Chrome browser ), The stroke-dasharray and are missing and the coordinate isn't in the right place as my expectation in the upper part, its good in the lower part. like image below:
Stroke-dash are missing in the top part and coordinate is not in the right place
Did i need to add more function? Please help me to figure out,
Thank you,
I'm trying to convert a .svg file to a font, by using http://icomoon.io/app/ app.
I don't know why, but it is not working. I already tried it before with other files, and it worked.
Here is code for svg image (if you need to see picture just paste it in editor and save as .svg file I guess)
I'm not sure, but I think there could be something wrong in a svg code, is it up to lates standards?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="128pt" height="128pt" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />
<path fill="#010101" d=" M 53.05 7.85 C 69.60 4.58 87.31 9.41 100.07 20.39 C 100.09 32.60 100.02 44.80 100.02 57.00 C 100.22 60.35 98.92 63.52 97.31 66.38 C 94.98 70.57 92.63 74.75 90.33 78.95 C 89.56 78.96 88.03 78.97 87.27 78.97 C 83.90 84.45 80.91 90.15 77.90 95.83 C 79.17 96.72 80.45 97.58 81.74 98.44 C 80.54 100.57 79.09 102.65 78.71 105.13 C 82.31 106.41 82.80 101.95 84.36 99.87 C 85.56 100.39 86.71 101.06 88.00 101.35 C 89.27 100.96 89.70 99.54 90.37 98.54 C 92.93 93.79 95.58 89.09 98.16 84.36 C 97.57 83.89 96.39 82.95 95.80 82.48 C 98.60 76.74 102.24 71.44 104.82 65.58 C 107.10 60.38 106.35 54.59 106.48 49.08 C 106.59 41.93 106.35 34.77 106.69 27.62 C 115.57 37.75 119.81 51.61 119.26 64.98 C 118.75 80.67 111.02 95.89 98.83 105.75 C 87.62 115.07 72.58 119.59 58.09 118.04 C 42.23 116.69 27.40 107.80 18.19 94.90 C 5.63 77.77 4.45 53.31 15.17 35.00 C 23.09 21.06 37.25 10.76 53.05 7.85 Z" />
<path fill="#ffffff" d=" M 42.57 16.50 C 43.91 15.74 46.15 15.18 46.82 17.24 C 45.33 18.71 43.37 19.45 41.53 20.35 C 31.97 25.09 24.31 33.34 20.08 43.11 C 19.81 45.14 15.82 44.62 17.09 42.48 C 21.83 30.96 31.20 21.53 42.57 16.50 Z" />
<path fill="#ffffff" d=" M 24.15 46.38 C 28.38 35.64 37.29 26.97 48.08 22.92 C 49.71 23.36 49.78 25.53 48.24 26.05 C 39.99 29.47 32.89 35.71 28.77 43.65 C 28.00 45.20 27.09 46.68 26.07 48.08 C 25.59 47.66 24.63 46.81 24.15 46.38 Z" />
<path fill="#ffffff" d=" M 49.39 31.08 C 50.87 30.25 51.93 30.60 52.56 32.14 C 51.39 33.88 49.23 34.34 47.52 35.38 C 42.26 38.38 37.89 43.03 35.31 48.53 C 34.85 49.58 34.15 50.46 33.24 51.18 C 32.37 50.60 31.20 49.45 32.06 48.34 C 35.36 40.67 41.73 34.37 49.39 31.08 Z" />
<path fill="#ffffff" d=" M 57.12 43.35 C 64.70 40.81 73.62 43.30 78.78 49.39 C 85.63 57.22 85.03 70.27 77.30 77.29 C 70.25 84.18 58.20 84.72 50.68 78.29 C 44.68 73.57 41.68 65.19 43.75 57.79 C 45.27 51.06 50.57 45.44 57.12 43.35 Z" />
<path fill="#010101" d=" M 59.35 46.59 C 67.78 44.09 77.35 49.99 79.35 58.47 C 82.31 68.10 74.15 79.10 64.08 79.01 C 56.56 79.62 49.36 74.07 47.41 66.90 C 44.96 58.31 50.63 48.59 59.35 46.59 Z" />
<path fill="#ffffff" d=" M 57.86 62.84 C 57.21 57.61 64.96 54.74 67.86 59.24 C 71.45 63.49 66.35 69.54 61.41 68.10 C 59.77 66.76 57.55 65.28 57.86 62.84 Z" />
</svg>
'Problem' lays within the app.
Basicly it changes every path to the same color, so white overlapping paths just blend in. You can delete first path
<path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" />
(which is just unnecessary square in the background) to see that it actually works. You will have to convert your paths into a shape so there will be no overlaps but 'cuts'.
Out of boredom I created working version:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve">
<path d="M50,26.1c-0.2,7-3.7,13.9-9.2,18.3c-5,4.2-11.8,6.2-18.3,5.5 c-7.1-0.6-13.8-4.6-17.9-10.4C-1,31.8-1.5,20.8,3.3,12.6c3.6-6.3,9.9-10.9,17-12.2C27.7-1,35.6,1.1,41.4,6.1c0,5.5,0,11,0,16.4 c0.1,1.5-0.5,2.9-1.2,4.2c-1,1.9-2.1,3.8-3.1,5.6c-0.3,0-1,0-1.4,0c-1.5,2.5-2.9,5-4.2,7.6c0.6,0.4,1.1,0.8,1.7,1.2 c-0.5,1-1.2,1.9-1.4,3c1.6,0.6,1.8-1.4,2.5-2.4c0.5,0.2,1.1,0.5,1.6,0.7c0.6-0.2,0.8-0.8,1.1-1.3c1.1-2.1,2.3-4.2,3.5-6.4 c-0.3-0.2-0.8-0.6-1.1-0.8c1.3-2.6,2.9-5,4-7.6c1-2.3,0.7-4.9,0.7-7.4c0-3.2-0.1-6.4,0.1-9.6C48.3,13.9,50.2,20.1,50,26.1z M15.6,4.3C10.5,6.6,6.3,10.8,4.1,16c-0.6,1,1.2,1.2,1.3,0.3c1.9-4.4,5.3-8.1,9.6-10.2c0.8-0.4,1.7-0.7,2.4-1.4 C17.2,3.7,16.2,4,15.6,4.3z M18,7.2C13.2,9,9.2,12.9,7.3,17.7c0.2,0.2,0.6,0.6,0.9,0.8c0.5-0.6,0.9-1.3,1.2-2c1.8-3.6,5-6.4,8.7-7.9 C18.8,8.4,18.8,7.4,18,7.2z M18.6,10.9c-3.4,1.5-6.3,4.3-7.8,7.7c-0.4,0.5,0.1,1,0.5,1.3c0.4-0.3,0.7-0.7,0.9-1.2 c1.2-2.5,3.1-4.6,5.5-5.9c0.8-0.5,1.7-0.7,2.3-1.5C19.8,10.6,19.3,10.5,18.6,10.9z M31.8,19.1c-2.3-2.7-6.3-3.8-9.7-2.7 c-2.9,0.9-5.3,3.5-6,6.5c-0.9,3.3,0.4,7.1,3.1,9.2c3.4,2.9,8.8,2.6,11.9-0.4C34.6,28.4,34.9,22.6,31.8,19.1z M25.2,32.4 c-3.4,0.3-6.6-2.2-7.5-5.4c-1.1-3.9,1.4-8.2,5.4-9.1c3.8-1.1,8.1,1.5,9,5.3C33.4,27.5,29.7,32.4,25.2,32.4z M26.9,23.5 c-1.3-2-4.8-0.7-4.5,1.6c-0.1,1.1,0.9,1.8,1.6,2.4C26.2,28.1,28.5,25.4,26.9,23.5z"/>
</svg>