How to scale an entire scene in A-Frame? - aframe
I have an A-Frame scene:
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
How do I scale everything at once?
You can wrap all your entities in a wrapper/parent entity, and then scale that. Position, rotation, and scale of parent entities affect child entities.
<a-scene>
<a-entity scale="2 2 2">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-entity>
</a-scene>
Related
How to make svg stroke-dash one dash
I'm trying to reveal the arrow of an svg by animating the stroke-dash property of a circle on top, using masks. The code below shows it in action, but for some reason there are many dashes, there should only be one dash with space around it that's going from 0 to 100 stroke-dash length.. Can someone show me what i'm missing to just have one dash going from 0 - 100 length?
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
fill: none;
stroke-width: 50.8;
stroke-linecap: round;
animation: progress 3s infinite;
}
#keyframes progress {
0% {
stroke-dasharray: 0 100;
}
99% {
stroke-dasharray: 100 0;
}
}
</style>
</defs>
<defs>
<mask id="theMask">
<path class="circle" stroke-dasharray="0, 100" d="M253.47 119.78
a 143.24 143.24 0 0 1 0 286.48
a 143.24 143.24 0 0 1 0 -286.48" />
</mask>
</defs>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</g>
</svg>
Your path is quite irregular, but the radius of your shape is about 244 units. Therefore, its total length is about 1533 units. You can use a circle for the mask if you want to keep it simpler. If you do that, you need to rotate it so that it starts where you want it to:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
fill: none;
stroke-width: 115.8;
stroke-linecap: round;
animation: progress 3s infinite;
}
#keyframes progress {
0% {
stroke-dasharray: 0 1533;
}
99% {
stroke-dasharray: 1533 0;
}
}
</style>
</defs>
<defs>
<mask id="theMask">
<circle class="circle" cx="264" cy="264" r="244" transform="rotate(95, 264, 264)" />
</mask>
</defs>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</g>
</svg>
Try
#keyframes progress {
0% {
stroke-dasharray: 0 1000;
}
99% {
stroke-dasharray: 1000 0;
}
}
The number 1000 refers to the length of the path, not the percent filled, so you want it to equal the length of your circle. When you have a value of 100 it creates dashes every 100 units.
If I understand correctly, you want to make an arrow animation along with a growing line from zero to maximum length.
To implement this idea, you can combine two animations:
The first is an animation of line growth from zero to maximum by
changing the stroke dash from zero to maximum.
<!-- Circle drawing animation from zero to 100% -->
<animate
attributeName="stroke-dasharray"
begin="svg1.click"
dur="8s"
values="0 1508; 1508 0"
fill="freeze" />
Animation starts after clicking on the SVG canvas.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-linecap: round;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
<!-- Circle drawing animation from zero to 100% -->
<animate
attributeName="stroke-dasharray"
begin="svg1.click"
dur="5s"
values="0 1508; 1508 0"
fill="freeze" />
</path>
</svg>
The second animation is the movement of the arrow in a circle using
the command animateMotion
<animateMotion
id="an"
dur="5s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- the Arrow -->
<polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
<!-- Arrow motion animation -->
<animateMotion
id="an"
dur="5s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
</polyline>
</svg>
We combine two animations by setting the same start time for both animations and the same execution time
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
<!-- Circle drawing animation from zero to 100% -->
<animate attributeName="stroke-dasharray" begin="svg1.click" dur="8s" values="0 1508; 1508 0" fill="freeze" />
</path>
<!-- the Arrow -->
<polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
<!-- Arrow motion animation -->
<animateMotion
id="an"
dur="8s"
repeatCount="1"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
<!-- Arrow disappearance animation -->
<set attributeName="fill-opacity" to="0" begin="an.end" />
</polyline>
</svg>
How to rotate a part of SVG on itself with CSS?
I want to rotate only a part of an SVG on itself with transform: rotate() (and not on the whole SVG). These are the wheels of a bike.
I tried with transform-origin: 50% 50% but it doesn't work.
My SVG include in HTML:
<svg class="icon icon-bike-anim card-simple__icon" viewBox="0 0 30 32">
<title>bike-2</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0 0h30.476v32h-30.476v-32z"></path>
<path fill="none" stroke="#3a4161" style="stroke: var(--color2, #3a4161)" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="10" stroke-width="0.5714" d="M11.213 4.361c0-1.481 0.892-2.706 2.388-2.706 1.481 0 2.388 1.21 2.388 2.706-0.955 0.796-2.388 0.796-2.388 0.796s-1.433 0-2.388-0.796z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.704 4.336c0 0 0 0 0.285 0.025s0.285 0.025 0.285 0.025l-0 0.001-0 0.003-0.001 0.009c-0.001 0.008-0.002 0.019-0.003 0.033-0.003 0.029-0.008 0.070-0.014 0.122-0.013 0.104-0.035 0.252-0.067 0.43-0.064 0.353-0.172 0.828-0.349 1.307-0.176 0.476-0.426 0.973-0.783 1.355-0.363 0.388-0.842 0.663-1.455 0.663v-0.571c0.422 0 0.758-0.183 1.038-0.482 0.285-0.304 0.502-0.723 0.665-1.163 0.162-0.437 0.262-0.877 0.323-1.211 0.030-0.166 0.050-0.304 0.062-0.4 0.006-0.048 0.010-0.085 0.013-0.11 0.001-0.013 0.002-0.022 0.003-0.028l0.001-0.007 0-0.002z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M10.928 4.386c0-0 0-0 0.285-0.025s0.285-0.025 0.285-0.025l0 0.002 0.001 0.007c0.001 0.006 0.002 0.015 0.003 0.028 0.003 0.025 0.007 0.062 0.013 0.11 0.012 0.096 0.032 0.234 0.062 0.4 0.060 0.333 0.161 0.774 0.323 1.211 0.162 0.44 0.38 0.858 0.665 1.163 0.279 0.299 0.616 0.482 1.038 0.482v0.571c-0.613 0-1.092-0.275-1.455-0.663-0.357-0.382-0.607-0.879-0.783-1.355-0.177-0.478-0.285-0.954-0.349-1.307-0.032-0.177-0.053-0.325-0.067-0.43-0.007-0.052-0.011-0.094-0.014-0.122-0.002-0.014-0.003-0.026-0.003-0.033l-0.001-0.009-0-0.003-0-0.001z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 2.291v-0.637h0.571v0.637h-0.571z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 4.202v-1.433h0.571v1.433h-0.571z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.468 2.367l-0.478 1.751-0.551-0.15 0.478-1.751 0.551 0.15z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M12.284 2.216l0.478 1.751-0.551 0.15-0.478-1.751 0.551-0.15z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M8.857 4.839c0-2.625 2.118-4.743 4.743-4.743s4.743 2.118 4.743 4.743c0 2.197-1.503 4.050-3.532 4.581l-0.973 1.468c-0.053 0.080-0.142 0.128-0.238 0.128s-0.185-0.048-0.238-0.128l-0.973-1.468c-2.028-0.531-3.532-2.384-3.532-4.581zM13.601 0.667c-2.31 0-4.172 1.862-4.172 4.172 0 1.966 1.371 3.62 3.203 4.052 0.071 0.017 0.132 0.060 0.173 0.12l0.797 1.201 0.797-1.201c0.040-0.061 0.102-0.104 0.173-0.12 1.832-0.432 3.203-2.086 3.203-4.052 0-2.31-1.862-4.172-4.172-4.172z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.51 6.319c0.059-0.020 0.122-0.020 0.181 0l1.433 0.478-0.181 0.542-1.342-0.447-1.342 0.447-0.181-0.542 1.433-0.478z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.737 17.372c0.002-0.191 0.158-0.344 0.349-0.343 0.598 0.005 2.164 0.011 3.731 0.016 1.535 0.005 3.071 0.010 3.701 0.016 0.191 0.002 0.344 0.158 0.343 0.349s-0.158 0.344-0.349 0.343c-0.606-0.005-2.147-0.010-3.69-0.016-1.581-0.005-3.163-0.011-3.743-0.016-0.191-0.002-0.344-0.158-0.343-0.349z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.546 13.823c0.061-0.13 0.193-0.211 0.336-0.207l6.141 0.163c0.152 0.004 0.285 0.103 0.333 0.248l1.068 3.235c0.063 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23l-0.989-2.994-5.652-0.15-2.592 5.524c-0.085 0.18-0.3 0.258-0.48 0.173s-0.258-0.3-0.173-0.48l2.692-5.738z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.121 13.246c0.076 0.285 0.164 0.612 0.291 0.996 0.062 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23c-0.134-0.405-0.226-0.751-0.303-1.037-0.011-0.043-0.022-0.084-0.033-0.123-0.086-0.318-0.147-0.521-0.223-0.665-0.065-0.125-0.131-0.184-0.229-0.225-0.119-0.049-0.314-0.080-0.661-0.069-0.199 0.006-0.366-0.15-0.372-0.349s0.15-0.366 0.349-0.372c0.378-0.012 0.696 0.015 0.958 0.123 0.282 0.116 0.465 0.311 0.594 0.557 0.119 0.227 0.199 0.51 0.281 0.813 0.011 0.041 0.022 0.083 0.034 0.126z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M18.391 17.219c0.086 0.17 0.018 0.378-0.152 0.465l-5.412 2.745c-0.17 0.086-0.378 0.018-0.465-0.152s-0.018-0.378 0.152-0.465l5.412-2.745c0.17-0.086 0.378-0.018 0.465 0.152z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.724 13.627c0.183-0.055 0.376 0.049 0.43 0.232l1.847 6.162c0.055 0.183-0.049 0.376-0.232 0.43s-0.376-0.049-0.43-0.232l-1.847-6.162c-0.055-0.183 0.049-0.376 0.232-0.43z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M8.212 19.37l4.49 0.406-0.062 0.689-4.49-0.406 0.062-0.689z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M21.005 17.11c0.18-0.063 0.378 0.031 0.441 0.211l1.1 3.127c0.063 0.18-0.031 0.378-0.211 0.441s-0.378-0.031-0.441-0.211l-1.1-3.127c-0.063-0.18 0.031-0.378 0.211-0.441z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M9.408 10.787c0.144-0.064 0.313 0.001 0.377 0.145l1.524 3.429c0.064 0.144-0.001 0.313-0.145 0.377s-0.313-0.001-0.377-0.145l-1.524-3.429c-0.064-0.144 0.001-0.313 0.145-0.377z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M11.338 11.072c-0.001 0.158-0.129 0.285-0.287 0.285l-2.731-0.010c-0.158-0.001-0.285-0.129-0.285-0.287s0.129-0.285 0.287-0.285l2.731 0.010c0.158 0.001 0.285 0.129 0.285 0.287z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M-2.286 17.778h8.381v0.645h-8.381v-0.645z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M0.293 19.39h5.802v0.645h-5.802v-0.645z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M3.839 21.001h2.256v0.645h-2.256v-0.645z"></path>
<path class="anim-wheel-back" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M5.631 18.362l2.178 1.258-2.207 1.274c-0.174-0.375-0.272-0.794-0.272-1.236 0-0.465 0.108-0.905 0.3-1.296zM5.822 18.031c0.48-0.721 1.271-1.215 2.178-1.29v2.547l-2.178-1.258zM8.381 19.949l2.288 1.321c-0.497 0.754-1.333 1.263-2.288 1.309v-2.63zM10.857 20.939l-2.286-1.32 2.256-1.303c0.206 0.401 0.323 0.857 0.323 1.341 0 0.46-0.106 0.895-0.293 1.282zM8 22.572c-0.931-0.077-1.738-0.594-2.214-1.345l2.214-1.278v2.623zM8.381 16.735c0.932 0.044 1.75 0.53 2.251 1.254l-2.251 1.3v-2.554zM8.241 16.011c-2.007 0-3.631 1.634-3.631 3.646s1.624 3.646 3.631 3.646c2.007 0 3.631-1.634 3.631-3.646s-1.624-3.646-3.631-3.646z"></path>
<path class="anim-wheel-front" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M20.326 19.522l1.489 0.86-1.388 0.801c-0.152-0.279-0.239-0.599-0.239-0.939 0-0.255 0.049-0.499 0.137-0.722zM20.439 19.285c0.305-0.542 0.859-0.924 1.507-0.991v1.861l-1.507-0.87zM22.208 20.609l1.477 0.853c-0.348 0.438-0.879 0.724-1.477 0.742v-1.595zM23.834 21.246l-1.495-0.863 1.605-0.927c0.106 0.241 0.165 0.508 0.165 0.789 0 0.366-0.1 0.708-0.275 1.001zM21.947 22.194c-0.565-0.058-1.059-0.356-1.378-0.79l1.378-0.795v1.585zM22.208 18.285c0.684 0.020 1.28 0.391 1.614 0.938l-1.614 0.932v-1.87zM22.149 17.524c-1.503 0-2.721 1.218-2.721 2.721s1.218 2.721 2.721 2.721c1.503 0 2.721-1.218 2.721-2.721s-1.218-2.721-2.721-2.721z"></path>
</svg>
And the SCSS :
.icon {
&-bike-anim,
&-elephant-anim,
&-clock-anim {
width: 74px;
height: 74px;
}
.anim {
&-wheel-back,
&-wheel-front,
&-ball,
&-hour,
&-minute {
transform-origin: 50% 50%;
animation: turn-wheel 3s linear 1s infinite running;
}
}
}
.icon-bike-anim, .icon-elephant-anim, .icon-clock-anim {
width: 74px;
height: 74px;
}
.icon .anim-wheel-back, .icon .anim-wheel-front, .icon .anim-ball, .icon .anim-hour, .icon .anim-minute {
transform-origin: 50% 50%;
animation: turn-wheel 3s linear 1s infinite running;
}
<svg class="icon icon-bike-anim card-simple__icon" viewBox="0 0 30 32">
<title>bike-2</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0 0h30.476v32h-30.476v-32z"></path>
<path fill="none" stroke="#3a4161" style="stroke: var(--color2, #3a4161)" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="10" stroke-width="0.5714" d="M11.213 4.361c0-1.481 0.892-2.706 2.388-2.706 1.481 0 2.388 1.21 2.388 2.706-0.955 0.796-2.388 0.796-2.388 0.796s-1.433 0-2.388-0.796z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.704 4.336c0 0 0 0 0.285 0.025s0.285 0.025 0.285 0.025l-0 0.001-0 0.003-0.001 0.009c-0.001 0.008-0.002 0.019-0.003 0.033-0.003 0.029-0.008 0.070-0.014 0.122-0.013 0.104-0.035 0.252-0.067 0.43-0.064 0.353-0.172 0.828-0.349 1.307-0.176 0.476-0.426 0.973-0.783 1.355-0.363 0.388-0.842 0.663-1.455 0.663v-0.571c0.422 0 0.758-0.183 1.038-0.482 0.285-0.304 0.502-0.723 0.665-1.163 0.162-0.437 0.262-0.877 0.323-1.211 0.030-0.166 0.050-0.304 0.062-0.4 0.006-0.048 0.010-0.085 0.013-0.11 0.001-0.013 0.002-0.022 0.003-0.028l0.001-0.007 0-0.002z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M10.928 4.386c0-0 0-0 0.285-0.025s0.285-0.025 0.285-0.025l0 0.002 0.001 0.007c0.001 0.006 0.002 0.015 0.003 0.028 0.003 0.025 0.007 0.062 0.013 0.11 0.012 0.096 0.032 0.234 0.062 0.4 0.060 0.333 0.161 0.774 0.323 1.211 0.162 0.44 0.38 0.858 0.665 1.163 0.279 0.299 0.616 0.482 1.038 0.482v0.571c-0.613 0-1.092-0.275-1.455-0.663-0.357-0.382-0.607-0.879-0.783-1.355-0.177-0.478-0.285-0.954-0.349-1.307-0.032-0.177-0.053-0.325-0.067-0.43-0.007-0.052-0.011-0.094-0.014-0.122-0.002-0.014-0.003-0.026-0.003-0.033l-0.001-0.009-0-0.003-0-0.001z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 2.291v-0.637h0.571v0.637h-0.571z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 4.202v-1.433h0.571v1.433h-0.571z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.468 2.367l-0.478 1.751-0.551-0.15 0.478-1.751 0.551 0.15z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M12.284 2.216l0.478 1.751-0.551 0.15-0.478-1.751 0.551-0.15z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M8.857 4.839c0-2.625 2.118-4.743 4.743-4.743s4.743 2.118 4.743 4.743c0 2.197-1.503 4.050-3.532 4.581l-0.973 1.468c-0.053 0.080-0.142 0.128-0.238 0.128s-0.185-0.048-0.238-0.128l-0.973-1.468c-2.028-0.531-3.532-2.384-3.532-4.581zM13.601 0.667c-2.31 0-4.172 1.862-4.172 4.172 0 1.966 1.371 3.62 3.203 4.052 0.071 0.017 0.132 0.060 0.173 0.12l0.797 1.201 0.797-1.201c0.040-0.061 0.102-0.104 0.173-0.12 1.832-0.432 3.203-2.086 3.203-4.052 0-2.31-1.862-4.172-4.172-4.172z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.51 6.319c0.059-0.020 0.122-0.020 0.181 0l1.433 0.478-0.181 0.542-1.342-0.447-1.342 0.447-0.181-0.542 1.433-0.478z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.737 17.372c0.002-0.191 0.158-0.344 0.349-0.343 0.598 0.005 2.164 0.011 3.731 0.016 1.535 0.005 3.071 0.010 3.701 0.016 0.191 0.002 0.344 0.158 0.343 0.349s-0.158 0.344-0.349 0.343c-0.606-0.005-2.147-0.010-3.69-0.016-1.581-0.005-3.163-0.011-3.743-0.016-0.191-0.002-0.344-0.158-0.343-0.349z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.546 13.823c0.061-0.13 0.193-0.211 0.336-0.207l6.141 0.163c0.152 0.004 0.285 0.103 0.333 0.248l1.068 3.235c0.063 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23l-0.989-2.994-5.652-0.15-2.592 5.524c-0.085 0.18-0.3 0.258-0.48 0.173s-0.258-0.3-0.173-0.48l2.692-5.738z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.121 13.246c0.076 0.285 0.164 0.612 0.291 0.996 0.062 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23c-0.134-0.405-0.226-0.751-0.303-1.037-0.011-0.043-0.022-0.084-0.033-0.123-0.086-0.318-0.147-0.521-0.223-0.665-0.065-0.125-0.131-0.184-0.229-0.225-0.119-0.049-0.314-0.080-0.661-0.069-0.199 0.006-0.366-0.15-0.372-0.349s0.15-0.366 0.349-0.372c0.378-0.012 0.696 0.015 0.958 0.123 0.282 0.116 0.465 0.311 0.594 0.557 0.119 0.227 0.199 0.51 0.281 0.813 0.011 0.041 0.022 0.083 0.034 0.126z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M18.391 17.219c0.086 0.17 0.018 0.378-0.152 0.465l-5.412 2.745c-0.17 0.086-0.378 0.018-0.465-0.152s-0.018-0.378 0.152-0.465l5.412-2.745c0.17-0.086 0.378-0.018 0.465 0.152z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.724 13.627c0.183-0.055 0.376 0.049 0.43 0.232l1.847 6.162c0.055 0.183-0.049 0.376-0.232 0.43s-0.376-0.049-0.43-0.232l-1.847-6.162c-0.055-0.183 0.049-0.376 0.232-0.43z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M8.212 19.37l4.49 0.406-0.062 0.689-4.49-0.406 0.062-0.689z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M21.005 17.11c0.18-0.063 0.378 0.031 0.441 0.211l1.1 3.127c0.063 0.18-0.031 0.378-0.211 0.441s-0.378-0.031-0.441-0.211l-1.1-3.127c-0.063-0.18 0.031-0.378 0.211-0.441z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M9.408 10.787c0.144-0.064 0.313 0.001 0.377 0.145l1.524 3.429c0.064 0.144-0.001 0.313-0.145 0.377s-0.313-0.001-0.377-0.145l-1.524-3.429c-0.064-0.144 0.001-0.313 0.145-0.377z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M11.338 11.072c-0.001 0.158-0.129 0.285-0.287 0.285l-2.731-0.010c-0.158-0.001-0.285-0.129-0.285-0.287s0.129-0.285 0.287-0.285l2.731 0.010c0.158 0.001 0.285 0.129 0.285 0.287z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M-2.286 17.778h8.381v0.645h-8.381v-0.645z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M0.293 19.39h5.802v0.645h-5.802v-0.645z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M3.839 21.001h2.256v0.645h-2.256v-0.645z"></path>
<path class="anim-wheel-back" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M5.631 18.362l2.178 1.258-2.207 1.274c-0.174-0.375-0.272-0.794-0.272-1.236 0-0.465 0.108-0.905 0.3-1.296zM5.822 18.031c0.48-0.721 1.271-1.215 2.178-1.29v2.547l-2.178-1.258zM8.381 19.949l2.288 1.321c-0.497 0.754-1.333 1.263-2.288 1.309v-2.63zM10.857 20.939l-2.286-1.32 2.256-1.303c0.206 0.401 0.323 0.857 0.323 1.341 0 0.46-0.106 0.895-0.293 1.282zM8 22.572c-0.931-0.077-1.738-0.594-2.214-1.345l2.214-1.278v2.623zM8.381 16.735c0.932 0.044 1.75 0.53 2.251 1.254l-2.251 1.3v-2.554zM8.241 16.011c-2.007 0-3.631 1.634-3.631 3.646s1.624 3.646 3.631 3.646c2.007 0 3.631-1.634 3.631-3.646s-1.624-3.646-3.631-3.646z"></path>
<path class="anim-wheel-front" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M20.326 19.522l1.489 0.86-1.388 0.801c-0.152-0.279-0.239-0.599-0.239-0.939 0-0.255 0.049-0.499 0.137-0.722zM20.439 19.285c0.305-0.542 0.859-0.924 1.507-0.991v1.861l-1.507-0.87zM22.208 20.609l1.477 0.853c-0.348 0.438-0.879 0.724-1.477 0.742v-1.595zM23.834 21.246l-1.495-0.863 1.605-0.927c0.106 0.241 0.165 0.508 0.165 0.789 0 0.366-0.1 0.708-0.275 1.001zM21.947 22.194c-0.565-0.058-1.059-0.356-1.378-0.79l1.378-0.795v1.585zM22.208 18.285c0.684 0.020 1.28 0.391 1.614 0.938l-1.614 0.932v-1.87zM22.149 17.524c-1.503 0-2.721 1.218-2.721 2.721s1.218 2.721 2.721 2.721c1.503 0 2.721-1.218 2.721-2.721s-1.218-2.721-2.721-2.721z"></path>
</svg>
With this code the wheels rotate in relation to the SVG axis and not on themselves. Can you help me please ?
Original image:
Image with rotation:
transform-origin in SVG refers to the center of the SVG not the sub-element (such as the path).
However, you can use CSS to "redefine" how you want the transform applied using transform-box to tell that particular element to determine it's own center.
transform-box:fill-box;
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
MDN
Note, still an experimental property
.icon-bike-anim,
.icon-elephant-anim,
.icon-clock-anim {
width: 274px;
height: 274px;
}
.icon .anim-wheel-back,
.icon .anim-wheel-front,
.icon .anim-ball,
.icon .anim-hour,
.icon .anim-minute {
transform-origin: 50% 50%;
transform-box: fill-box;
animation: turn-wheel 3s linear 1s infinite running;
}
#keyframes turn-wheel {
100% {
transform: rotate(1turn)
}
;
}
<svg class="icon icon-bike-anim card-simple__icon" viewBox="0 0 30 32">
<title>bike-2</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0 0h30.476v32h-30.476v-32z"></path>
<path fill="none" stroke="#3a4161" style="stroke: var(--color2, #3a4161)" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="10" stroke-width="0.5714" d="M11.213 4.361c0-1.481 0.892-2.706 2.388-2.706 1.481 0 2.388 1.21 2.388 2.706-0.955 0.796-2.388 0.796-2.388 0.796s-1.433 0-2.388-0.796z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.704 4.336c0 0 0 0 0.285 0.025s0.285 0.025 0.285 0.025l-0 0.001-0 0.003-0.001 0.009c-0.001 0.008-0.002 0.019-0.003 0.033-0.003 0.029-0.008 0.070-0.014 0.122-0.013 0.104-0.035 0.252-0.067 0.43-0.064 0.353-0.172 0.828-0.349 1.307-0.176 0.476-0.426 0.973-0.783 1.355-0.363 0.388-0.842 0.663-1.455 0.663v-0.571c0.422 0 0.758-0.183 1.038-0.482 0.285-0.304 0.502-0.723 0.665-1.163 0.162-0.437 0.262-0.877 0.323-1.211 0.030-0.166 0.050-0.304 0.062-0.4 0.006-0.048 0.010-0.085 0.013-0.11 0.001-0.013 0.002-0.022 0.003-0.028l0.001-0.007 0-0.002z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M10.928 4.386c0-0 0-0 0.285-0.025s0.285-0.025 0.285-0.025l0 0.002 0.001 0.007c0.001 0.006 0.002 0.015 0.003 0.028 0.003 0.025 0.007 0.062 0.013 0.11 0.012 0.096 0.032 0.234 0.062 0.4 0.060 0.333 0.161 0.774 0.323 1.211 0.162 0.44 0.38 0.858 0.665 1.163 0.279 0.299 0.616 0.482 1.038 0.482v0.571c-0.613 0-1.092-0.275-1.455-0.663-0.357-0.382-0.607-0.879-0.783-1.355-0.177-0.478-0.285-0.954-0.349-1.307-0.032-0.177-0.053-0.325-0.067-0.43-0.007-0.052-0.011-0.094-0.014-0.122-0.002-0.014-0.003-0.026-0.003-0.033l-0.001-0.009-0-0.003-0-0.001z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 2.291v-0.637h0.571v0.637h-0.571z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 4.202v-1.433h0.571v1.433h-0.571z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.468 2.367l-0.478 1.751-0.551-0.15 0.478-1.751 0.551 0.15z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M12.284 2.216l0.478 1.751-0.551 0.15-0.478-1.751 0.551-0.15z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M8.857 4.839c0-2.625 2.118-4.743 4.743-4.743s4.743 2.118 4.743 4.743c0 2.197-1.503 4.050-3.532 4.581l-0.973 1.468c-0.053 0.080-0.142 0.128-0.238 0.128s-0.185-0.048-0.238-0.128l-0.973-1.468c-2.028-0.531-3.532-2.384-3.532-4.581zM13.601 0.667c-2.31 0-4.172 1.862-4.172 4.172 0 1.966 1.371 3.62 3.203 4.052 0.071 0.017 0.132 0.060 0.173 0.12l0.797 1.201 0.797-1.201c0.040-0.061 0.102-0.104 0.173-0.12 1.832-0.432 3.203-2.086 3.203-4.052 0-2.31-1.862-4.172-4.172-4.172z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.51 6.319c0.059-0.020 0.122-0.020 0.181 0l1.433 0.478-0.181 0.542-1.342-0.447-1.342 0.447-0.181-0.542 1.433-0.478z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.737 17.372c0.002-0.191 0.158-0.344 0.349-0.343 0.598 0.005 2.164 0.011 3.731 0.016 1.535 0.005 3.071 0.010 3.701 0.016 0.191 0.002 0.344 0.158 0.343 0.349s-0.158 0.344-0.349 0.343c-0.606-0.005-2.147-0.010-3.69-0.016-1.581-0.005-3.163-0.011-3.743-0.016-0.191-0.002-0.344-0.158-0.343-0.349z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.546 13.823c0.061-0.13 0.193-0.211 0.336-0.207l6.141 0.163c0.152 0.004 0.285 0.103 0.333 0.248l1.068 3.235c0.063 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23l-0.989-2.994-5.652-0.15-2.592 5.524c-0.085 0.18-0.3 0.258-0.48 0.173s-0.258-0.3-0.173-0.48l2.692-5.738z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.121 13.246c0.076 0.285 0.164 0.612 0.291 0.996 0.062 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23c-0.134-0.405-0.226-0.751-0.303-1.037-0.011-0.043-0.022-0.084-0.033-0.123-0.086-0.318-0.147-0.521-0.223-0.665-0.065-0.125-0.131-0.184-0.229-0.225-0.119-0.049-0.314-0.080-0.661-0.069-0.199 0.006-0.366-0.15-0.372-0.349s0.15-0.366 0.349-0.372c0.378-0.012 0.696 0.015 0.958 0.123 0.282 0.116 0.465 0.311 0.594 0.557 0.119 0.227 0.199 0.51 0.281 0.813 0.011 0.041 0.022 0.083 0.034 0.126z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M18.391 17.219c0.086 0.17 0.018 0.378-0.152 0.465l-5.412 2.745c-0.17 0.086-0.378 0.018-0.465-0.152s-0.018-0.378 0.152-0.465l5.412-2.745c0.17-0.086 0.378-0.018 0.465 0.152z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.724 13.627c0.183-0.055 0.376 0.049 0.43 0.232l1.847 6.162c0.055 0.183-0.049 0.376-0.232 0.43s-0.376-0.049-0.43-0.232l-1.847-6.162c-0.055-0.183 0.049-0.376 0.232-0.43z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M8.212 19.37l4.49 0.406-0.062 0.689-4.49-0.406 0.062-0.689z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M21.005 17.11c0.18-0.063 0.378 0.031 0.441 0.211l1.1 3.127c0.063 0.18-0.031 0.378-0.211 0.441s-0.378-0.031-0.441-0.211l-1.1-3.127c-0.063-0.18 0.031-0.378 0.211-0.441z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M9.408 10.787c0.144-0.064 0.313 0.001 0.377 0.145l1.524 3.429c0.064 0.144-0.001 0.313-0.145 0.377s-0.313-0.001-0.377-0.145l-1.524-3.429c-0.064-0.144 0.001-0.313 0.145-0.377z"></path>
<path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M11.338 11.072c-0.001 0.158-0.129 0.285-0.287 0.285l-2.731-0.010c-0.158-0.001-0.285-0.129-0.285-0.287s0.129-0.285 0.287-0.285l2.731 0.010c0.158 0.001 0.285 0.129 0.285 0.287z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M-2.286 17.778h8.381v0.645h-8.381v-0.645z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M0.293 19.39h5.802v0.645h-5.802v-0.645z"></path>
<path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M3.839 21.001h2.256v0.645h-2.256v-0.645z"></path>
<path class="anim-wheel-back" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M5.631 18.362l2.178 1.258-2.207 1.274c-0.174-0.375-0.272-0.794-0.272-1.236 0-0.465 0.108-0.905 0.3-1.296zM5.822 18.031c0.48-0.721 1.271-1.215 2.178-1.29v2.547l-2.178-1.258zM8.381 19.949l2.288 1.321c-0.497 0.754-1.333 1.263-2.288 1.309v-2.63zM10.857 20.939l-2.286-1.32 2.256-1.303c0.206 0.401 0.323 0.857 0.323 1.341 0 0.46-0.106 0.895-0.293 1.282zM8 22.572c-0.931-0.077-1.738-0.594-2.214-1.345l2.214-1.278v2.623zM8.381 16.735c0.932 0.044 1.75 0.53 2.251 1.254l-2.251 1.3v-2.554zM8.241 16.011c-2.007 0-3.631 1.634-3.631 3.646s1.624 3.646 3.631 3.646c2.007 0 3.631-1.634 3.631-3.646s-1.624-3.646-3.631-3.646z"></path>
<path class="anim-wheel-front" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M20.326 19.522l1.489 0.86-1.388 0.801c-0.152-0.279-0.239-0.599-0.239-0.939 0-0.255 0.049-0.499 0.137-0.722zM20.439 19.285c0.305-0.542 0.859-0.924 1.507-0.991v1.861l-1.507-0.87zM22.208 20.609l1.477 0.853c-0.348 0.438-0.879 0.724-1.477 0.742v-1.595zM23.834 21.246l-1.495-0.863 1.605-0.927c0.106 0.241 0.165 0.508 0.165 0.789 0 0.366-0.1 0.708-0.275 1.001zM21.947 22.194c-0.565-0.058-1.059-0.356-1.378-0.79l1.378-0.795v1.585zM22.208 18.285c0.684 0.020 1.28 0.391 1.614 0.938l-1.614 0.932v-1.87zM22.149 17.524c-1.503 0-2.721 1.218-2.721 2.721s1.218 2.721 2.721 2.721c1.503 0 2.721-1.218 2.721-2.721s-1.218-2.721-2.721-2.721z"></path>
</svg>
How to remove blank space from this svg
This svg is supposed to show in small area so the blank space around the svg causes problem how can i reduce it so that only the loader is there and no blank area. <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;"> <!--circle(cx="16",cy="50",r="10")--> <circle cx="84" cy="50" r="0" fill="#413fa4"> <animate attributeName="r" values="10;0;0;0;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="cx" values="84;84;84;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> </circle> <circle cx="46.4254" cy="50" r="10" fill="#22b75b"> <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate> <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate> </circle> <circle cx="16" cy="50" r="8.94865" fill="#413fa4"> <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate> <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate> </circle> <circle cx="84" cy="50" r="1.05135" fill="#22b75b"> <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate></circle> <circle cx="80.4254" cy="50" r="10" fill="#413fa4"> <animate attributeName="r" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="cx" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> </circle> </svg>
change cy value to 10 it will remove unwanted space on top and bottom <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;"> <!--circle(cx="16",cy="10",r="10")--> <circle cx="84" cy="10" r="0" fill="#413fa4"> <animate attributeName="r" values="10;0;0;0;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="cx" values="84;84;84;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> </circle> <circle cx="46.4254" cy="10" r="10" fill="#22b75b"> <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate> <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate> </circle> <circle cx="16" cy="10" r="8.94865" fill="#413fa4"> <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate> <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate> </circle> <circle cx="84" cy="10" r="1.05135" fill="#22b75b"> <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> </circle> <circle cx="80.4254" cy="10" r="10" fill="#413fa4"> <animate attributeName="r" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="cx" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate> </circle> </svg>
SVG stroke-width not working
How to make the SVG shape outline thicker / thinner. I am trying to implement the stroke-width property, but it is ignored by SVG. <svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF"> <path stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/> </svg> JSFiddle
You need to set a stroke in order for stroke-width to have an effect. stroke="black" for instance. <svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF"> <path stroke="black" stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/> </svg>
IE 11 and Edge adding space above and below SVG despite using "display: block"
I am familiar with the issue of IE adding space above and below a SVG when not using display: block, because it treats the SVG as an inline element.
But I am using display: block; and getting the same results. Why?
svg {
width: 100%;
display: block;
}
.svgContainer {
width: 25%;
}
<div class="svgContainer">
<a id="one">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
<div class="svgContainer">
<a id="two">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
<div class="svgContainer">
<a id="three">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
I solved it in a kind of hackish way, but thought there would be a simple CSS fix.
after all CSS and scripts have loaded , I take the width of the svg element, which is known and based on the width to height ratio of the original svg, I use jquery to assign a height $("#svgElementToBeAssignedHeight").css("height", width of rendered svg element *(height of original svg viewbox/width of original svg viewbox)