SVG foreign element in chrome - html
I have built a simon game ina Js/jQuery with svg graphics. It works normally in Firefox but seems broken in every other browser. It seems that the problem lies inside the foreignObject svg element. The simon game lies in codepen.io:
http://codepen.io/gavlooth/pen/PzKYdv
Does anyone have any idea of what is going wrong?
Here is the code
<div id="canvas">
<div id="circle">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewbox ="0 0 1062.9921 1062.9921"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="simon2 svg.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="196.48829"
inkscape:cy="174.88852"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<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:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,10.629921)">
<ellipse
style="fill:#2f9d84;fill-opacity:0.82882882"
id="path4149"
cx="537.88177"
cy="499.36212"
rx="504.27341"
ry="474.14215"
transform="matrix(0.99999945,-0.00104714,0.00106105,0.99999944,0,0)" />
<foreignObject x="300" y="300" width="500" height="400" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div id = "Fcontainer">
<div id = "item1"> Simon <span class="sup">®</span> </div>
<div id = "item2">
<div id="counter">
<div id="dis">
--
</div>
</div>
<div id = "start">
<div class='btn-circle red' style="margin-top:25%">
</div>
</div>
<div id= "strict">
<div id='indicator-light'>
</div>
<div id ="skata" class='btn-circle orange'>
</div>
</div>
</div>
<div id = "item3">
<div style="margin-left:12%;">
<div>
COUNT
</div>
<div>
START
</div>
<div>
STRICT
</div>
</div>
<div id="svg-button" style="height:70%;">
<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"
width="100%"
height="100%"
viewbox ="0 0 44.122022 44.122029"
id="svg4246"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="button1.svg">
<defs
id="defs4248">
<linearGradient
gradientTransform="matrix(0.70155592,0,0,0.73625312,527.90634,341.60443)"
inkscape:collect="always"
xlink:href="#linearGradient3257"
id="linearGradient2714"
gradientUnits="userSpaceOnUse"
x1="127.19796"
y1="18.49473"
x2="127.19796"
y2="47.546875" />
<linearGradient
id="linearGradient3257"
inkscape:collect="always">
<stop
id="stop3259"
offset="0"
style="stop-color:#ffffff;stop-opacity:1" />
<stop
id="stop3261"
offset="1"
style="stop-color:#ffffff;stop-opacity:0" />
</linearGradient>
<linearGradient
gradientTransform="matrix(0.7015559,0,0,0.7362531,405.0492,347.31872)"
inkscape:collect="always"
xlink:href="#linearGradient3257"
id="linearGradient2716"
gradientUnits="userSpaceOnUse"
x1="127.19796"
y1="18.49473"
x2="127.19796"
y2="47.546875" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="30.895793"
inkscape:cy="15.757932"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata4251">
< 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></dc:title>
</cc:work>
</ rdf: rdf>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-595.08187,-353.15835)">
<ellipse class="identifier"
ry="22.061014"
rx="22.06101"
cy="375.21936"
cx="617.14288"
id="path3676"
style="fill:#ef2929;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<ellipse class="identifier"
ry="11.988996"
rx="15.734934"
cy="367.21024"
cx="617.14282"
style="opacity:0.75;fill:url(#linearGradient2714);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3678" />
<g
style="fill:#a40000;stroke:none"
transform="matrix(0.58240892,0,0,0.62445042,258.47069,-114.72848)"
id="g3750">
<path
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)"
d="m 649.08789,892.00586 c -7.61805,2.49027 -13.14452,9.59996 -13.14453,18.05664 2e-5,10.525 8.53164,19.05663 19.05664,19.05664 10.525,-3e-5 19.05663,-8.53164 19.05664,-19.05664 -2e-5,-8.45901 -5.5512,-15.56911 -13.17578,-18.05664 l 0,6.80273 c 4.06873,2.13526 6.90625,6.34341 6.90625,11.25391 10e-6,7.04627 -5.74083,12.78711 -12.78711,12.78711 -7.04628,10e-6 -12.78711,-5.74083 -12.78711,-12.78711 -2e-5,-4.90752 2.80743,-9.1179 6.875,-11.25391 l 0,-6.80273 z"
inkscape:href="#path22091"
id="path3752"
style="fill:#a40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xlink:href="#path22091"
inkscape:original="M 649.75 891.0625 C 641.40779 893.35756 635.28126 900.99292 635.28125 910.0625 C 635.28127 920.94545 644.11705 929.78124 655 929.78125 C 665.88295 929.78122 674.71874 920.94545 674.71875 910.0625 C 674.71873 900.98968 668.56549 893.35456 660.21875 891.0625 L 660.21875 899.15625 C 664.28467 901.11041 667.125 905.25095 667.125 910.0625 C 667.12501 916.75034 661.68785 922.1875 655 922.1875 C 648.31215 922.18751 642.875 916.75035 642.875 910.0625 C 642.87498 905.25102 645.6842 901.11044 649.75 899.15625 L 649.75 891.0625 z "
inkscape:radius="-0.66131908"
sodipodi:type="inkscape:offset" />
<path
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)"
d="m 651.78906,887.91406 0,22.60938 6.42188,0 0,-22.60938 -6.42188,0 z"
inkscape:href="#path22093"
id="path3754"
style="fill:#a40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xlink:href="#path22093"
inkscape:original="M 651.1875 887.3125 L 651.1875 911.125 L 658.8125 911.125 L 658.8125 887.3125 L 651.1875 887.3125 z "
inkscape:radius="-0.60243881"
sodipodi:type="inkscape:offset" />
</g>
<g
id="g3756"
transform="matrix(0.58240892,0,0,0.58240892,258.47069,-82.518459)"
style="fill:#eeeeec;stroke:none">
<path class="identifier"
sodipodi:type="inkscape:offset"
inkscape:radius="-0.66131908"
inkscape:original="M 649.75 891.0625 C 641.40779 893.35756 635.28126 900.99292 635.28125 910.0625 C 635.28127 920.94545 644.11705 929.78124 655 929.78125 C 665.88295 929.78122 674.71874 920.94545 674.71875 910.0625 C 674.71873 900.98968 668.56549 893.35456 660.21875 891.0625 L 660.21875 899.15625 C 664.28467 901.11041 667.125 905.25095 667.125 910.0625 C 667.12501 916.75034 661.68785 922.1875 655 922.1875 C 648.31215 922.18751 642.875 916.75035 642.875 910.0625 C 642.87498 905.25102 645.6842 901.11044 649.75 899.15625 L 649.75 891.0625 z "
xlink:href="#path22091"
style="fill:#eeeeec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3758"
inkscape:href="#path22091"
d="m 649.08789,892.00586 c -7.61805,2.49027 -13.14452,9.59996 -13.14453,18.05664 2e-5,10.525 8.53164,19.05663 19.05664,19.05664 10.525,-3e-5 19.05663,-8.53164 19.05664,-19.05664 -2e-5,-8.45901 -5.5512,-15.56911 -13.17578,-18.05664 l 0,6.80273 c 4.06873,2.13526 6.90625,6.34341 6.90625,11.25391 10e-6,7.04627 -5.74083,12.78711 -12.78711,12.78711 -7.04628,10e-6 -12.78711,-5.74083 -12.78711,-12.78711 -2e-5,-4.90752 2.80743,-9.1179 6.875,-11.25391 l 0,-6.80273 z"
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)" />
<path class="identifier"
sodipodi:type="inkscape:offset"
inkscape:radius="-0.60243881"
inkscape:original="M 651.1875 887.3125 L 651.1875 911.125 L 658.8125 911.125 L 658.8125 887.3125 L 651.1875 887.3125 z "
xlink:href="#path22093"
style="fill:#eeeeec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3760"
inkscape:href="#path22093"
d="m 651.78906,887.91406 0,22.60938 6.42188,0 0,-22.60938 -6.42188,0 z"
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)" />
</g>
</g>
</svg>
</div>
<div style="height:10%; display:flex;align-items:center;justify-content: space-between;">
<h1 id="onoff" style ="width:100%;margin-bottom:1%;">OFF</h1>
</div>
</div>
</div>
</div>
</body>
</foreignObject>
<path
style="fill:rgb(155,0,2);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25401148px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 254.74219 151.22852 A 90.20688 102.17109 86.965732 0 1 161.13867 232.70508 L 161.2832 276.62891 A 132.65856 125.40141 0 0 0 293.52539 151.22852 L 254.74219 151.22852 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342" />
<path
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90004063px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path_3342-2"
ry="444.33566"
rx="470.04999"
cy="516.64783"
cx="538.57147"
d=""
inkscape:connector-curvature="0" />
<path
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90004063px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path_3342-3"
ry="444.33566"
rx="470.04999"
cy="516.64783"
cx="538.57147"
d=""
inkscape:connector-curvature="0" />
<path
style="fill:rgb(0,173,173);fill-rule:evenodd;stroke:#000000;stroke-width:0.23711532px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 51.255859 152.16797 L 10.865234 152.40625 A 132.67548 125.41836 0 0 0 143.81641 277.04102 L 143.7168 232.44531 A 90.20688 102.17109 86.965732 0 1 51.255859 152.16797 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-8" />
<path
style="fill:rgb(173,158,0);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25482526px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 162.19531 10.912109 L 161.88867 52.886719 A 90.20688 102.17109 86.965732 0 1 255.52539 137.11719 L 293.92773 137.11719 A 132.65774 126.20696 0 0 0 162.19531 10.912109 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-9" />
<path
style="fill:rgb(54,100,0);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25401148px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 141.89453 10.105469 A 132.65856 125.40141 0 0 0 10.066406 135.21094 L 51.109375 135.30273 A 90.20688 102.17108 86.96573 0 1 142.18945 54.666016 L 141.89453 10.105469 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-27" />
<ellipse
ry="319.72186"
rx="361.94296"
cy="504.01788"
cx="541.88934"
id="ellipse4202"
style="fill:#cac8e9;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.69846582px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
transform="matrix(0.99991186,-0.01327684,0.00207067,0.99999786,0,0)" />
</g>
</svg>
</div>
</div>
Related
draw hexagonal like shape SVG
I need to draw svg like below for my project , as you see it is like hexagonal but arms length are different and also angles are diffrent for beginning I have this shape that I made it online <?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <path d="M 666.103 405.572 Q 674 401.012 681.897 405.572 L 764.819 453.446 Q 772.717 458.006 772.717 467.125 L 772.717 562.875 Q 772.717 571.994 764.819 576.554 L 681.897 624.428 Q 674 628.988 666.103 624.428 L 583.181 576.554 Q 575.283 571.994 575.283 562.875 L 575.283 467.125 Q 575.283 458.006 583.181 453.446 Z" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-width: 0px;" transform="matrix(0.000073, 1, -1, 0.000073, 770.866394, -503.854004)" bx:shape="n-gon 674 515 113.988 113.988 6 0.08 1#c1c50f7e"/> </svg> How can I change it to first picture ?
If you have the time for it, it can be constructed. Here I create a mask that has the right shape and – in the mask – cut off the corners. This mask is then used on a <rect>. <svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 120 70" width="300"> <defs> <path id="corner" d="M -1 -2 L 6 0 Q 0 0 -3 5.2 Z" /> <mask id="hex"> <path d="M 0 34.64 L 20 0 L 100 0 L 120 34.64 L 100 69.28 L 20 69.28 Z" fill="white"/> <g fill="black"> <use transform="translate(20 0)" href="#corner" /> <use transform="translate(0 34.64) rotate(-60)" href="#corner" /> <use transform="translate(20 69.28) rotate(-120)" href="#corner" /> <use transform="translate(100 69.28) rotate(-180)" href="#corner" /> <use transform="translate(120 34.64) rotate(-240)" href="#corner" /> <use transform="translate(100 0) rotate(-300)" href="#corner" /> </g> </mask> </defs> <rect width="120" height="70" fill="#42aaab" mask="url(#hex)" /> </svg>
Firefox does not correctly process a svg image, but it does Chrome
With Chrome the image looks perfectly and with Mozilla it looks deformed.
Chrome !
Firefox !
I have tried to modify the code to make it compatible but I have not succeeded.
<div class="col-md-3" >
<ul class="nav tab-info">
<li class="active"><img style="width:100%;" src="{!!asset('img/fechas/programa.svg')!!}"></li>
<li><img style="width:100%;" src="{!!asset('img/fechas/ponentes.svg')!!}"></li>
</ul>
</div>
This is the code of the speakers image, I made some modifications to the original but I have not achieved anything, I hope you can help me I leave the code at the request of the partner. Thank you.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
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"
width="350"
height="93"
viewBox="0 0 350 93"
version="1.1"
id="svg74"
sodipodi:docname="prueba.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata78">
<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>block1m-dn</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview76"
showgrid="false"
inkscape:zoom="0.76940455"
inkscape:cx="125.41259"
inkscape:cy="214.94077"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Page-1"
inkscape:snap-text-baseline="true" />
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title
id="title45">block1m-dn</title>
<desc
id="desc47">Created with Sketch.</desc>
<defs
id="defs51">
<linearGradient
id="linearGradient858"
osb:paint="solid">
<stop
style="stop-color:#c00000;stop-opacity:1;"
offset="0"
id="stop856" />
</linearGradient>
<circle
id="path-1"
cx="30"
cy="30"
r="30" />
<path
d="m 102.304,31 h -3.36 V 13.984 h 3.36 z m 6.84,-6.792 V 31 h -3.192 V 19.192 h 3.096 v 1.464 c 0.72,-1.224 2.136,-1.776 3.408,-1.776 2.928,0 4.272,2.088 4.272,4.68 V 31 h -3.192 v -6.888 c 0,-1.32 -0.648,-2.352 -2.184,-2.352 -1.392,0 -2.208,1.08 -2.208,2.448 z m 22.08,-10.584 v 15.24 c 0,0.792 0.048,1.656 0.096,2.136 h -3.048 c -0.048,-0.24 -0.12,-0.816 -0.12,-1.368 -0.528,0.936 -1.728,1.656 -3.312,1.656 -3.36,0 -5.76,-2.64 -5.76,-6.216 0,-3.456 2.328,-6.168 5.664,-6.168 2.04,0 3,0.84 3.336,1.464 v -6.744 z m -8.928,11.448 c 0,2.112 1.248,3.36 2.928,3.36 1.632,0 2.904,-1.248 2.904,-3.384 0,-2.112 -1.272,-3.288 -2.904,-3.288 -1.632,0 -2.928,1.2 -2.928,3.312 z M 137.776,31 H 134.68 V 13.624 h 3.144 v 6.864 c 0.528,-0.84 1.824,-1.608 3.576,-1.608 3.456,0 5.448,2.664 5.448,6.168 0,3.576 -2.208,6.24 -5.568,6.24 -1.632,0 -2.88,-0.72 -3.504,-1.728 z m 5.88,-5.928 c 0,-2.16 -1.296,-3.336 -2.928,-3.336 -1.608,0 -2.952,1.176 -2.952,3.336 0,2.136 1.344,3.36 2.952,3.36 1.632,0 2.928,-1.2 2.928,-3.36 z m 12.912,-5.928 v 3.216 c -0.36,-0.072 -0.672,-0.096 -0.96,-0.096 -1.632,0 -3.048,0.792 -3.048,3.336 V 31 h -3.192 V 19.192 h 3.096 v 1.752 c 0.72,-1.56 2.352,-1.848 3.36,-1.848 0.264,0 0.504,0.024 0.744,0.048 z M 166.528,31 c -0.048,-0.24 -0.096,-0.792 -0.096,-1.272 -0.648,1.104 -2.016,1.584 -3.264,1.584 -2.856,0 -4.488,-2.088 -4.488,-4.656 v -7.464 h 3.192 v 6.816 c 0,1.32 0.672,2.376 2.16,2.376 1.416,0 2.232,-0.96 2.232,-2.328 v -6.864 h 3.192 v 9.672 c 0,0.912 0.072,1.728 0.12,2.136 z m 17.544,-17.376 v 15.24 c 0,0.792 0.048,1.656 0.096,2.136 H 181.12 C 181.072,30.76 181,30.184 181,29.632 c -0.528,0.936 -1.728,1.656 -3.312,1.656 -3.36,0 -5.76,-2.64 -5.76,-6.216 0,-3.456 2.328,-6.168 5.664,-6.168 2.04,0 3,0.84 3.336,1.464 v -6.744 z m -8.928,11.448 c 0,2.112 1.248,3.36 2.928,3.36 1.632,0 2.904,-1.248 2.904,-3.384 0,-2.112 -1.272,-3.288 -2.904,-3.288 -1.632,0 -2.928,1.2 -2.928,3.312 z"
id="path-3"
inkscape:connector-curvature="0" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient858"
id="linearGradient3613"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10)"
x1="78.916122"
y1="44.384567"
x2="323.81326"
y2="44.384567" />
</defs>
<g
id="Page-1"
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1">
<g
id="block1m-dn">
<g
id="Text-Copy"
transform="translate(97,7)" />
<g
id="Group-Copy"
transform="translate(20,7)"
style="opacity:1;fill:#ffffff;fill-opacity:1">
<g
id="Oval"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#818388;stroke-width:4">
<g
id="g971">
<circle
style="fill:#ffffff;fill-opacity:1"
r="30"
cy="38"
cx="20"
id="circle55" />
</g>
</g>
<g
id="Artboard-17#4x-Clipped"
style="fill:#ffffff;fill-opacity:1">
<mask
id="mask-2"
fill="white">
<use
xlink:href="#path-1"
id="use58"
x="0"
y="0"
width="100%"
height="100%" />
</mask>
<g
id="g61"
style="fill:#ffffff;fill-opacity:1" />
<g
id="g968" />
</g>
</g>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.66666794px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient3613);fill-opacity:1;stroke:none"
x="84.957787"
y="62.370247"
id="text3785"><tspan
sodipodi:role="line"
id="tspan850"
x="84.957787"
y="62.370247"
style="fill:url(#linearGradient3613);fill-opacity:1">PONENTES</tspan></text>
<image
y="19.55138"
x="16.953688"
id="image847"
xlink:href="data:image/png;base64,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 "
preserveAspectRatio="none"
height="46.169998"
width="46.169998"
style="fill:#c83737;fill-opacity:1" />
<path
style="opacity:1;fill:#c00000;fill-opacity:0;stroke-width:0.32492658"
d="M 35.476697,76.584652 C 17.384745,73.676488 5.4802854,57.004989 8.7140086,39.10507 10.555267,28.912989 18.042219,19.634036 27.634373,15.656119 c 4.293653,-1.7806 7.346505,-2.359559 12.391297,-2.349951 5.516447,0.01051 8.842051,0.728131 13.416693,2.895159 3.956897,1.874399 6.47746,3.696265 9.491206,6.86025 3.926864,4.122624 6.303952,8.244295 7.86696,13.640649 0.65576,2.26404 0.74091,3.252168 0.72506,8.413985 -0.0166,5.404257 -0.08461,6.065502 -0.895124,8.702132 C 67.206711,64.955975 58.908407,72.9092 47.498981,75.987931 45.560742,76.510946 37.505484,76.910768 35.476697,76.584652 Z M 46.93883,72.226955 C 55.430952,70.062872 62.7261,63.704855 66.03809,55.58118 72.654085,39.353414 62.858598,21.110652 45.554789,17.433803 c -1.636502,-0.347737 -3.517684,-0.442459 -6.666363,-0.335669 -3.785512,0.12839 -4.809432,0.287306 -7.473311,1.159889 -4.597985,1.506121 -7.739085,3.484362 -11.37243,7.162271 -3.420727,3.462681 -5.277149,6.390127 -6.630549,10.455902 -2.596413,7.799935 -1.711605,16.66101 2.328703,23.321245 4.529517,7.46667 11.81826,12.359619 20.385712,13.684972 2.702723,0.418099 7.815849,0.108135 10.812279,-0.655458 z"
id="path862"
inkscape:connector-curvature="0" />
</g>
</svg>
For Firefox, it is necessary to indicate not only the width, but also the height of the image <img style="width:100%; height:100%" Try opening the SVG file in a text editor and delete the line preserveAspectRatio="none" The none attribute stretches the image to the full width of the parent container without maintaining proportions preserveAspectRatio Update Thank you very much to #enxaneta for this comment: You are using a very strange liniar gradient just to fill the text with a solid color. It helped to find a solution. As it turned out, if one of the two colors is black, then the vector editors: Figma, Sketch write a linear gradient with only one attribute stop-color instead of two <linearGradient id="linearGradient858"> <stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/> </linearGradient> Chrome processes this form of writing the gradient, butFirefox does not understand it because it more strictly complies with the requirements of the SVG specification Gradients are used to style text, so there is such a difference in rendering text. I used the SVG-EDITOR code optimizer, that's what happened in the end Note It is necessary to add * .svg files to the optimizer We remove the gradients, add text as a separate line using the usual text decoration attributes <text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="93" width="350" height="93" viewBox="0 0 350 93" version="1.1" id="svg74"> <metadata id="metadata78"/> <title id="title45"> block1m-dn </title> <desc id="desc47"> Created with Sketch. </desc> <defs id="defs51"> <!-- <linearGradient id="linearGradient858"> --> <!-- <stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/> --> <!-- </linearGradient> --> <circle id="path-1" cx="30" cy="30" r="30"/> <path d="m102.3 31h-3.36V13.98h3.36zm6.84-6.79V31h-3.19V19.19h3.1v1.46c0.72-1.22 2.14-1.78 3.41-1.78 2.93 0 4.27 2.09 4.27 4.68V31h-3.19v-6.89c0-1.32-0.65-2.35-2.18-2.35-1.39 0-2.21 1.08-2.21 2.45zm22.08-10.58v15.24c0 0.79 0.05 1.66 0.1 2.14h-3.05c-0.05-0.24-0.12-0.82-0.12-1.37-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31zM137.78 31H134.68V13.62h3.14v6.86c0.53-0.84 1.82-1.61 3.58-1.61 3.46 0 5.45 2.66 5.45 6.17 0 3.58-2.21 6.24-5.57 6.24-1.63 0-2.88-0.72-3.5-1.73zm5.88-5.93c0-2.16-1.3-3.34-2.93-3.34-1.61 0-2.95 1.18-2.95 3.34 0 2.14 1.34 3.36 2.95 3.36 1.63 0 2.93-1.2 2.93-3.36zm12.91-5.93v3.22c-0.36-0.07-0.67-0.1-0.96-0.1-1.63 0-3.05 0.79-3.05 3.34V31h-3.19V19.19h3.1v1.75c0.72-1.56 2.35-1.85 3.36-1.85 0.26 0 0.5 0.02 0.74 0.05zM166.53 31c-0.05-0.24-0.1-0.79-0.1-1.27-0.65 1.1-2.02 1.58-3.26 1.58-2.86 0-4.49-2.09-4.49-4.66v-7.46h3.19v6.82c0 1.32 0.67 2.38 2.16 2.38 1.42 0 2.23-0.96 2.23-2.33v-6.86h3.19v9.67c0 0.91 0.07 1.73 0.12 2.14zm17.54-17.38v15.24c0 0.79 0.05 1.66 0.1 2.14H181.12C181.07 30.76 181 30.18 181 29.63c-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31z" id="path-3"/> <linearGradient xlink:href="#linearGradient858" id="linearGradient3613" gradientUnits="userSpaceOnUse" gradientTransform="translate(10)" x1="78.92" y1="44.38" x2="323.81" y2="44.38"/> </defs> <g id="Page-1" fill="none"> <g id="block1m-dn"> <g id="Text-Copy" transform="translate(97,7)"/> <g id="Group-Copy" transform="translate(20,7)" fill="#fff"> <g id="Oval" style="fill:#fff;stroke-width:4;stroke:#818388"> <g id="g971"> <circle r="30" cy="38" cx="20" id="circle55" fill="#fff"/> </g> </g> <g id="Artboard-17#4x-Clipped" fill="#fff"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1" id="use58" x="0" y="0" width="100" height="100"/> </mask> <g id="g61" fill="#fff"/> <g id="g968"/> </g> </g> </g> <!-- <text xml:space="preserve" x="84.96" y="62.37" id="text3785" style="-inkscape-font-specification:'Bahnschrift, Bold';fill:url(#linearGradient3613);font-family:Bahnschrift;font-feature-settings:normal;font-size:50.67;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold;letter-spacing:0;line-height:1.25;text-align:start;text-anchor:start;word-spacing:0;writing-mode:lr-tb"> <tspan id="tspan850" x="84.96" y="62.37" fill="url(#linearGradient3613)"> PONENTES </tspan> </text> --> <!-- Add text --> <text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text> <image y="19.55" x="16.95" id="image847" xlink:href="data:image/png;base64,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 " preserveAspectRatio="none" height="46.17" width="46.17" fill="#c83737"/> <path d="M35.48 76.58C17.38 73.68 5.48 57 8.71 39.11 10.56 28.91 18.04 19.63 27.63 15.66c4.29-1.78 7.35-2.36 12.39-2.35 5.52 0.01 8.84 0.73 13.42 2.9 3.96 1.87 6.48 3.7 9.49 6.86 3.93 4.12 6.3 8.24 7.87 13.64 0.66 2.26 0.74 3.25 0.73 8.41-0.02 5.4-0.08 6.07-0.9 8.7C67.21 64.96 58.91 72.91 47.5 75.99 45.56 76.51 37.51 76.91 35.48 76.58ZM46.94 72.23C55.43 70.06 62.73 63.7 66.04 55.58 72.65 39.35 62.86 21.11 45.55 17.43c-1.64-0.35-3.52-0.44-6.67-0.34-3.79 0.13-4.81 0.29-7.47 1.16-4.6 1.51-7.74 3.48-11.37 7.16-3.42 3.46-5.28 6.39-6.63 10.46-2.6 7.8-1.71 16.66 2.33 23.32 4.53 7.47 11.82 12.36 20.39 13.68 2.7 0.42 7.82 0.11 10.81-0.66z" id="path862" style="fill:none;stroke-width:0.32"/> </g> </svg> NOTE If you save the file in * .svg format, then the rendering of the text size will be different even if there is only one line in the file Why is this happening I do not know
How to resize an svg?
I've tried numerous methods I've found on stackoverflow and google but my svg isn't resizing. Can someone please explain why? <div> <svg viewBox="32 32 32 32" height="100" width="100"> <g transform="translate(0,-952.36218)"> <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z" style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;" fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible" /> </g> </svg> </div> https://codepen.io/hellojessicagraham/pen/XBOyzP
I adjusted the viewbox values and removed the svg css styles. <svg viewBox="15 32 75 36" height="20px" width="20px"> https://codepen.io/anon/pen/OwddPa Explanation of how svg viewbox works: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
You can do it by modifying 'width' and 'height' attributes on your tag.
<svg viewBox="32 32 32 32" height="100" width="100">
Or, also through css, by adding in your stylesheet:
svg{
width:100px;
height:100px;
}
<div style='background:red'>
<svg viewBox="32 32 32 32" height="100" width="100">
<g transform="translate(0,-952.36218)">
<path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
/>
</g>
</svg>
</div>
SVG Animation forwards and backwards
i have a svg animation which works very well, but i have a problem with one point. There's a biker who rides from left to right. All the time ... I want to have, that the biker rides from left to right, then from right to left and so on. Here is my pen: <svg version="1.1" x="0" y="0" viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve"> <path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/> <g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)"> <path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1 c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1 c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8 c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7 c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0 c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1 c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6 c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4 c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4 c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1 c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3 c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8 c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1 c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8 C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2 c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7 C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6 c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4 c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6 c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5 l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2 c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3 C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0 c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7 c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5 c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4 c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4 c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7 c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0 L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8 c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8 c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1 C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4 c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6 c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5 c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6 C802.5,56.5,803.1,58.8,802.6,60.6z"/> </g> <animateMotion xlink:href="#bike" dur="6s" begin="0s" repeatCount="indefinite" rotate="auto" direction="alternate" > <mpath xlink:href="#pfad" /> </animateMotion> </svg> THX
addition to #KingCodeFish answer you can rotate your bike by rotate="auto-reverse" <svg version="1.1" x="0" y="0" viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve"> <path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/> <g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)"> <path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1 c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1 c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8 c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7 c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0 c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1 c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6 c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4 c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4 c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1 c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3 c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8 c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1 c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8 C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2 c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7 C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6 c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4 c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6 c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5 l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2 c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3 C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0 c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7 c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5 c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4 c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4 c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7 c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0 L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8 c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8 c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1 C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4 c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6 c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5 c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6 C802.5,56.5,803.1,58.8,802.6,60.6z"/> </g> <animateMotion xlink:href="#bike" dur="6s" begin="0s;second.end" repeatCount="1" rotate="auto" id="first"> <mpath xlink:href="#pfad" /> </animateMotion> <animateMotion xlink:href="#bike" dur="6s" begin="first.end-200ms" repeatCount="1" rotate="auto-reverse" keyPoints="1;0" keyTimes="0;1" calcMode="linear" id="second"> <mpath xlink:href="#pfad" /> </animateMotion> </svg> also you can flip the bike driver horizontally <svg version="1.1" x="0" y="0" height="100" width="689.07001" viewBox="0 0 689.07294 99.996689" xml:space="preserve"> <path id="pfad" stroke="#a2b91c" transform="scale(1,1)" stroke-miterlimit="10" fill="none" d="m -28.711004,104.58853 24.9999999,-3.8 C 50.988996,91.788535 136.67514,76.504229 198.17514,66.304229 c 297.1,-49.100005 477.7,22.8 477.7,22.8 18.95813,6.809335 42.13126,10.093934 42.13126,10.093934" /> <g id="bike" fill="#a2b91c" width="9.34564" height="8.50777"> <path d="m -27.175349,-10.682945 c 1.68648,-1.764806 4.432203,-2.314868 6.628704,-1.530439 l 1.568761,-2.353483 c -0.137438,-0.685964 -0.451302,-1.234846 -0.686607,-1.901894 l -0.96098,-0.215656 c -0.333426,-0.647155 -1.000207,-0.411607 -1.471037,-0.725158 -0.137244,-0.176656 -0.176366,-0.3732 -0.117621,-0.588661 l 1.000182,-0.09812 0.09806,-0.01963 c -0.490329,-0.922101 -0.157131,-1.803819 -0.03933,-2.745992 1.294113,-2.196533 3.60813,-3.372875 6.098866,-3.667698 1.765017,-0.353139 3.098723,0.705801 4.687277,0.99986 l 0.176491,-0.13729 c -0.07847,-0.392224 -0.470697,-0.313753 -0.725671,-0.568689 -0.196144,-0.470667 0.15684,-0.745257 0.176458,-1.157042 0.156876,-0.235347 0.333368,-0.372647 0.529484,-0.411877 1.3923986,-0.176611 2.5887368,0.195922 3.6282088,0.803815 0.745288,0.666737 0.941484,1.647345 0.843511,2.686721 -0.254937,0.254973 -0.588341,0.117712 -0.745218,0.353059 l 0.196117,-0.03923 c -0.0588,0.215735 -0.196079,0.549138 -0.451013,0.804102 -0.07843,0.117675 0.01967,0.607958 -0.215694,0.451081 -0.333408,-0.137261 -0.254936,0.254973 -0.588344,0.117713 -0.01957,0.411852 -0.5294862,0.411878 -0.5490642,0.82373 -0.176463,0.647198 -0.725669,-0.568689 -1.157041,-0.176456 -0.156839,0.745257 -0.31367,1.490475 0.31393,2.078848 0.862933,0.235271 1.8434992,0.03908 2.7456042,-0.03943 0.6864,-0.137328 1.411994,-0.07856 2.039558,-0.510046 0.451081,0.215694 0.627544,-0.431503 1.176646,-0.235431 0.235348,0.156876 0.274589,0.352995 0.235387,0.666776 -0.01957,0.41185 -0.47063,0.706054 -0.294101,1.078663 0.294207,0.451042 -0.41181,0.490321 -0.313712,0.980585 -0.64716,0.333445 -1.51007,0.09817 -1.882696,0.78462 0,0 0.01963,0.09805 0.117676,0.07843 0.196117,-0.03923 0.333405,0.137262 0.274591,0.352985 0.0981,0.490285 0.725632,0.05877 1.00018,0.411767 -0.313751,0.470696 -0.470587,1.215934 -1.137372,1.451381 0.176531,0.37261 0.725633,0.05878 1.039375,0.09797 0.274552,-0.156913 0.627545,-0.431502 0.666735,-0.745284 0.37261,-0.176531 0.372649,0.333369 0.509938,0.509868 0.215736,0.0588 0.588342,-0.117711 0.647198,0.176466 -0.176463,0.647197 -0.803994,1.078664 -1.215817,1.569054 1.255225,0.666714 2.51045199,1.8433126 2.98125197,3.1768266 0.568876,1.823806 0.52978,4.177188 -0.70560697,5.648171 -1.274622,1.78470898 -3.098428,2.35358498 -5.157685,2.25569698 -2.1573282,-0.0783 -3.9028388,-1.66674998 -4.7070658,-3.64742198 -0.725744,-2.098341 -0.333714,-4.72637 1.3723526,-6.3935086 0.313751,-0.470697 1.117857,-0.529586 1.176606,-1.255225 -0.13729,-0.176491 -0.176531,-0.372608 -0.372649,-0.333368 -1.8825936,1.804403 -3.5298406,3.7656696 -5.3143596,5.5504786 0.117711,0.588343 0.451153,1.235533 0.392362,1.961174 -0.137171,0.843314 -0.803952,1.588553 -1.54917,1.941675 0.137291,0.176491 0.451082,0.215693 0.607998,0.490245 -0.156877,0.235348 -0.352995,0.274589 -0.666775,0.235387 -0.294178,0.05886 -0.137262,0.333407 -0.09802,0.529525 l -2.333793,0.059 c -0.156914,-0.274551 0.0784,-0.627574 0.137173,-0.843314 -0.01963,-0.09806 -0.13729,-0.176491 -0.333406,-0.137261 l -1.039343,0.921796 c -1.177236,0.74392998 -2.530359,1.11675498 -3.962079,1.09744698 -2.274966,-0.156977 -4.648026,-1.82391198 -5.393416,-4.02063798 -1.059216,-2.235317 -0.76521,-4.843443 1.117319,-6.6480596 z m 19.8867398,-4.080929 c -0.09805,0.01963 -0.196115,0.03923 -0.27455,0.156915 l 0.03923,0.196116 0.313791,0.0392 -0.07847,-0.392224 z m 1.941488,-1.51026 c -0.37261,0.176531 -0.804038,0.568795 -1.274726,0.764946 l 0.05885,0.294167 c 0.509898,-4.4e-5 0.78441,-0.666853 1.274722,-0.764936 0,0 0.0588,-0.215736 -0.05885,-0.294167 z m -1.078512,1.745518 c 0.137291,0.176491 0.411852,0.01957 0.509899,-4.5e-5 0.176492,-0.137289 0.352995,-0.274587 0.19608,-0.549138 l -0.705979,0.549178 z m 1.353303,1.156995 c 0.156877,-0.235348 -0.0981,-0.490285 -0.137328,-0.6864 -0.392224,0.07847 -0.647161,0.333444 -1.058999,0.313859 -0.137262,0.333406 0.196144,0.470668 0.45112,0.725594 0.313789,0.0392 0.588342,-0.117712 0.745219,-0.353061 z m 1.823992,1.470787 c 0.235309,-0.353024 0.13726,-0.333407 0.09802,-0.529525 -0.333405,-0.13726 -0.588341,0.117713 -0.980565,0.196184 -0.902125,0.07852 -2.118041,0.11783 -2.686815,-0.686213 -0.156914,-0.274551 -0.196183,-0.980567 -0.745286,-0.666736 -0.09803,0.529524 7.7e-5,1.019778 0.196222,1.490475 0.117675,0.07843 0.313791,0.0392 0.333408,0.137261 0.03923,0.196117 -0.254936,0.254964 -0.333371,0.372649 1.15705,-0.333486 2.372985,-0.372791 3.471246,0.01937 0.215736,0.0588 0.490284,-0.0981 0.64716,-0.333446 z m -7.5500738,6.0997486 c 0.07859,1.921982 1.1377367,3.64771 2.7459856,4.549724 1.5885532,0.80395198 3.9027512,0.64689798 5.2362692,-0.333816 1.588455,-1.235626 2.45126897,-3.039926 2.13724899,-5.118789 -0.157027,-1.804208 -1.62802799,-3.5496356 -3.29506999,-4.2358916 -1.059068,-0.196044 -2.451466,-0.529327 -3.451648,0.07869 -0.117637,0.431467 0.235387,0.666777 0.215803,1.0786676 0.431541,1.137455 0.490475,2.451369 1.471078,3.274987 0.196117,-0.03923 0.333406,0.137261 0.470697,0.313753 0.156916,0.274551 -0.0784,0.627572 -0.352955,0.784488 -0.274552,0.156915 -0.627573,-0.0784 -0.784489,-0.352955 -0.137289,-0.176492 0.137263,-0.333407 0.09803,-0.529525 -1.255225,-1.176607 -1.372986,-2.784795 -2.0399382,-4.0791256 -1.5296629,1.0198696 -2.4119846,2.7262096 -2.4510816,4.5697076 z M -8.2494454,-13.9597 c 0.01967,0.607957 0.05893,1.314015 0.4708062,1.843501 0.09802,-0.529525 -0.117751,-1.098262 -0.117785,-1.608152 -0.1961172,0.03922 -0.2549732,-0.254935 -0.3922652,-0.431427 -0.137288,-0.176491 0.117637,-0.431467 -0.01967,-0.607957 -0.07843,0.117675 -0.215736,-0.0588 -0.274551,0.156915 -0.0588,0.215736 0.196157,0.470669 0.333446,0.647161 z m -7.7851336,10.0220956 c -0.07843,0.117676 -0.156874,0.235348 -0.117637,0.431466 l 0.196119,-0.03923 -0.07847,-0.392224 z m 0.626681,-12.6690406 0.255002,0.764835 c 0.352995,-0.274591 0.705978,-0.54918 1.098204,-0.627653 -0.509899,4.4e-5 -0.843315,-0.137171 -1.353206,-0.137182 z m 0.02044,11.8259286 c 0.117677,0.07843 0.313793,0.0392 0.529525,0.09802 0.07843,-0.117675 0.117637,-0.431466 -4.4e-5,-0.509899 l -0.01963,-0.09806 c -0.274551,0.156915 -0.451042,0.294205 -0.509861,0.509938 z m 3.254552,-14.3170756 c -0.313791,-0.0392 -0.823691,-0.03916 -1.117858,0.01969 0.490322,0.411812 0.882605,0.843242 1.431685,1.039312 -0.176529,-0.372609 0.03916,-0.823691 -0.313859,-1.058999 z m 2.8636706,5.13799 c 0.254934,-0.254965 -0.215773,-0.568718 -0.07852,-0.902124 -0.6471979,-0.176463 -0.8826066,-0.843241 -1.0983516,-1.411997 -0.235349,-0.156876 -0.804075,0.0589 -0.980586,-0.313712 l -0.09805,0.01963 c -0.627504,0.941393 -1.49038,1.725918 -2.137437,2.569243 1.568957,0.196004 3.059435,0.509674 4.5303206,0.72525 -0.03922,-0.196116 -4.4e-5,-0.509898 -0.137328,-0.6864 z m -1.3137486,3.118318 c -0.235347,-0.156875 -4.4e-5,-0.509899 -0.137328,-0.6864 -0.05885,-0.294167 -0.431505,-0.627546 -0.274627,-0.862894 0.333405,0.137261 0.313829,0.549103 0.568793,0.804038 0.137262,-0.333408 -0.274628,-0.862895 0.215655,-0.960982 0.2745897,0.352984 0.0589,0.804076 0.2354307,1.176646 0.254937,-0.254974 0.5491019,-0.313831 0.6863629,-0.647237 0.0392,-0.313792 -0.0981,-0.490285 -0.4118789,-0.529486 -1.3727997,-0.235238 -2.8436797,-0.450856 -4.3145597,-0.666479 l -0.588302,0.627611 c 0.608035,1.000144 1.28e-4,2.039655 -0.450856,2.8436826 0.470696,0.313752 1.000181,0.411767 1.372898,0.745147 0.03923,0.196116 -0.13726,0.333407 -0.215695,0.451083 -0.313791,-0.0392 -0.235309,0.353022 -0.294136,0.568754 -0.411841,-0.01957 -0.666776,0.235387 -0.705979,0.549178 0.05885,0.294176 -0.47063,0.706055 0.0589,0.804076 l 0.294165,-0.05886 c 1.353104,-1.392492 2.804301,-2.804677 3.961255,-4.1579856 z m -4.059229,5.1973616 c -0.156876,0.235348 0.117713,0.588342 0.0785,0.902124 0.01963,0.09806 0.117674,0.07843 0.215736,0.0588 0.0392,-0.313791 -0.03927,-0.706016 -0.294243,-0.960952 z m -0.509727,2.549543 c 0.411842,0.01957 0.607919,-0.529554 0.74518,-0.86296 -0.431465,-0.117636 -0.529486,0.411878 -0.804037,0.568794 -0.0588,0.215736 0.03923,0.196116 0.05885,0.294166 z m -0.235388,-0.666776 c 0.117677,0.07843 0.294168,-0.05886 0.372611,-0.17653 0.0588,-0.215736 -0.137291,-0.176491 -0.254963,-0.254934 l -0.196117,0.03923 0.07847,0.392224 z m -0.431693,-3.177011 c 0.156876,-0.235348 0.490245,-0.607997 0.431388,-0.902163 -0.31379,-0.0392 -0.372608,0.17653 -0.431427,0.392264 -0.07843,0.117675 -0.13726,0.333406 4.4e-5,0.509899 z m -0.411548,4.059616 c 0.117675,0.07843 0.196115,-0.03923 0.31379,0.0392 0.09806,-0.01963 0.0588,-0.215736 0.0588,-0.215736 -0.254943,-0.254931 -0.50987,4.4e-5 -0.372579,0.176535 z m -1.059646,-8.8643736 c 0.137262,-0.333407 0.607919,-0.529555 0.33333,-0.882549 -0.294205,-0.451042 -0.588409,-0.902093 -0.961092,-1.235438 0.0589,0.804076 0.490394,1.43159 0.627722,2.118042 z m -0.666736,0.745287 -0.627723,-2.118041 c -0.313753,0.470696 -0.392146,1.09826 -0.607853,1.549361 0.196146,0.470667 0.627613,0.588303 1.000281,0.921674 0.07843,-0.117674 0.27455,-0.156914 0.235308,-0.353023 z m -0.117535,1.9611746 c -0.334475,-0.137035 -0.27573,-0.352497 -0.334512,-0.64733 -0.431549,-0.6272686 -1.039523,-1.1174606 -1.706341,-1.3922066 -0.82359,1.4905746 -1.745234,3.0007436 -2.451082,4.5697086 0.353023,0.235309 0.529485,-0.411879 0.862893,-0.274628 -0.05879,0.215737 -0.352984,0.27459 -0.411812,0.490322 l 3.922346,0.744953 c 0.176456,-1.157041 -0.274736,-2.39258 0.117405,-3.490842 z m -9.668107,5.197751 c 0.823819,2.078747 3.000842,3.27489998 5.138466,3.25520398 1.431688,0.01952 2.608337,-0.72582798 3.765293,-1.56925298 -0.05885,-0.294166 -0.588371,-0.392185 -0.372677,-0.843267 0.254896,-0.764873 0.980497,-1.216033 0.901984,-2.118137 -1.176745,-0.274478 -2.373083,-0.64702 -3.62821,-0.803815 -0.05879,0.215737 -0.313754,0.470707 -0.490246,0.607997 -0.196116,0.03923 -0.509899,3.9e-5 -0.647198,-0.176464 -0.156915,-0.274551 0.05878,-0.725632 -0.09813,-1.000182 l 0.117638,-0.431466 c 0.802867,-1.588928 1.724504,-3.0992996 2.430435,-4.6681536 -2.353561,-1.058383 -5.255992,-0.273961 -6.746349,1.9623516 -1.078426,1.744722 -1.215663,4.118495 -0.37217,5.785041 z" /> <animateMotion xlink:href="#bike" dur="6s" rotate="auto" begin="0s;fourth.end" repeatCount="1" id="first" fill="freeze"> <mpath xlink:href="#pfad" /> </animateMotion> <animateTransform attributeName="transform" type="scale" from="1 1" to="-1 1" begin="first.end" dur="0.2s" fill="freeze" id="second" /> <animateMotion xlink:href="#bike" dur="6s" rotate="auto" begin="second.end" direction="alternate" keyPoints="1;0" keyTimes="0;1" fill="freeze" calcMode="linear" id="third"> <mpath xlink:href="#pfad" /> </animateMotion> <animateTransform attributeName="transform" type="scale" from="-1 1" to="1 1" begin="third.end" dur="0.2s" fill="freeze" repeatCount="1" id="fourth" /> </g> </svg>
This works with keyPoints and keyTimes, the calcMode="linear" part is for a Chrome bug. I then began each animation using id's and .end, making an exception to the first run-through using 0s;second.end. <svg version="1.1" x="0" y="0" viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve"> <path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/> <g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)"> <path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1 c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1 c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8 c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7 c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0 c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1 c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6 c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4 c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4 c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1 c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3 c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8 c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1 c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8 C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2 c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7 C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6 c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4 c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6 c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5 l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2 c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3 C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0 c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7 c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5 c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4 c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4 c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7 c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0 L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8 c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8 c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1 C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4 c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6 c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5 c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6 C802.5,56.5,803.1,58.8,802.6,60.6z"/> </g> <animateMotion xlink:href="#bike" dur="6s" begin="0s;second.end" repeatCount="1" rotate="auto" direction="alternate" fill="freeze" id="first"> <mpath xlink:href="#pfad" /> </animateMotion> <animateMotion xlink:href="#bike" dur="6s" begin="first.end" repeatCount="1" rotate="auto" direction="alternate" keyPoints="1;0" keyTimes="0;1" calcMode="linear" fill="freeze" id="second"> <mpath xlink:href="#pfad" /> </animateMotion> </svg>
How to resize a `<svg>` image? Using CSS or inline
I have this graphic: http://jsfiddle.net/6xzvK/ As you can see I have tried to reduce the height and the width of the image changing the width and height attributes inline, but the image doesn't get smaller but actually it is clipped.. <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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="422.90625" height="379.90625" id="svg9312" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="distancia.svg"> <defs id="defs9314"/> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="547.89286" inkscape:cy="79.950317" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="true" inkscape:window-width="1280" inkscape:window-height="996" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/> <metadata id="metadata9317"> <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:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(675.75,-132.40625)"> <path inkscape:connector-curvature="0" style="fill:#cccccc;fill-opacity:1;stroke:#a7a7a7;stroke-width:40;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m -617.67786,152.40969 406.78608,0 c 21.08533,0 38.05866,16.97395 38.05866,38.05836 l 0,363.78878 c 0,21.08442 -16.97333,38.05866 -38.05866,38.05866 l -406.78608,0 c -21.08229,0 -38.05866,-16.97424 -38.05866,-38.05866 l 0,-363.78878 c 0,-21.08441 16.97637,-38.05836 38.05866,-38.05836 z" id="path13632"/> <path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -313.87975,305.7941 35.80527,0 0,197.61986 -35.80527,0 z" id="path13634"/> <path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -436.01245,241.32064 35.82652,0 0,262.09332 -35.82652,0 z" id="path13636"/> <path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -556.61758,305.7941 35.80526,0 0,197.61986 -35.80526,0 z" id="path13638"/> </g> </svg>
Give the root <svg> element a viewBox attribute and it will scale rather than clip. Something like this may work for you viewBox="0 0 800 400" but you might want to use the original width/height before you adjusted things.