I am trying to achieve animation for a balloon. I want the thread to move a bit as if the balloon is floating in the air. I am able to get the movement but for some reason the position of the thread has gone wrong. I understand the positioning values of thread is wrong but how do i match it with the balloon?
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89">
<g>
<path id="thread" fill="none" stroke="#010101" d="M 302 540 l 1 -150">
<animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131;
M60 302 c0 10 3 90 0 136;
M60 302 c0 10 10 90 0 138;
M60 302 c0 10 -3 90 0 136;
M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" />
</path>
<path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path>
<path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path>
</g>
</svg>
A translate transform can move the path.
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89">
<g>
<path id="thread" transform="translate(242, 130)" fill="none" stroke="#010101" d="M 302 540 l 1 -150">
<animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131;
M60 302 c0 10 3 90 0 136;
M60 302 c0 10 10 90 0 138;
M60 302 c0 10 -3 90 0 136;
M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" />
</path>
<path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path>
<path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path>
</g>
</svg>
Related
I'm using a predesigned menu which has been used svg for drawing icons.
For some reasons, I have to change icon size using path element.
Now, I want to change icon and I have my own custom icons; So, I downloaded some svg icon of web, BUT icons which has been used by me, have the same size that they had, even if I use large svg icons made by material design icons.
This is my Original path element:
<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
And this is my svg structure:
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<path class="path-1" d="M45 67.9c0 2.3 1.9 4.1 4.2 4.1a4.1 4.1 0 1 0 0-8.3 4.1 4.1 0 0 0-4.1 4.2zm6 0c0 1-.8 1.7-1.8 1.7s-1.8-.7-1.8-1.7.8-1.8 1.8-1.8 1.8.7 1.8 1.8z"/>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M66.7 53.6l-.3.5-1.3 1.8-.3.4-.1.3V60l-.2.3v.1c-.3 1-1 1.4-2.3 1.4h-4.5l-.6.1a9 9 0 0 0-4 1.6l-1.7 1.1-.5.4-1.5 1a302.7 302.7 0 0 0-4 2.6c-.2 0-.3-.1-.5-.3L41.5 66l-1.7-1-.4-.4a141.7 141.7 0 0 1-3-1.8 9 9 0 0 0-2.6-.9h-.1a15.6 15.6 0 0 0-1.4 0h-3.7c-1.2 0-2-.6-2.3-1.5v-.1l-.1-.3V39c0-1.8.7-2.6 2.5-2.6h27.5l.7-2.1H28.7C25.8 34.3 24 36 24 39v21l.1.4a4.5 4.5 0 0 0 .4 1.4v.2l.4.5.2.1c0 .2.2.3.3.4l.2.2a3.4 3.4 0 0 0 .7.4 3.2 3.2 0 0 0 .8.3l.5.1.5.1h4.2l1 .1h.2a7.3 7.3 0 0 1 2.7 1l.3.2.9.6 2.6 1.7v.1l3.7 2.5a3 3 0 0 0 1.7.5 3 3 0 0 0 1.7-.5l3.6-2.5h.1l2.6-1.8 1-.6.2-.2.6-.3c.7-.4 1.4-.6 2.1-.7h5l.3-.1h.6l.5-.2h.3l.5-.3a2.8 2.8 0 0 0 .7-.4 5.3 5.3 0 0 0 .5-.6 3.9 3.9 0 0 0 .8-1.4l.2-.8v-6.9.1z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M70 25.6l-4-1.2a3 3 0 0 0-1.9 0c-.9.3-1.6 1.1-2 2.1l-.4 1.4-.2.5-.2.7-6.7 20.6.1 8.5v.2c.3.8.7 1.4 1.4 1.7.5.3 1.2.4 1.8.1.4-.1.8-.4 1.2-.8 1.2-1.5 2.4-3 3.4-4.6l1.6-2.3.1-.1 6.3-19.2.6-1.6.6-1.8c.6-1.9-.2-3.6-1.8-4.2zM56.3 50l6.4-19.5.6.2.7.3-6.3 19.3c-.6.2-1 .2-1.4 0V50zm4.1 1.4c-1.5.2-2-.6-2.1-.8l6.3-19.4 2.3.8-6.5 19.4zm.9 2.4a62 62 0 0 1-3 4l-1.9-.7v-6l1.4-.1c.3.5 1 1.2 2.7 1 .1.4.5.8 1.4.9l-.6 1zm1.5-2.2l-.4.6c-1 0-1.3-.3-1.4-.5l6.5-19.5 1.5.5-6.2 19zm7.4-22.4l-.6 1.9-5.8-2-.6-.1.2-.6.4-1.3c.3-1 1-1.4 1.8-1.2l3.8 1.3c.8.3 1.1 1.1.8 2z"/>
</g>
<g class="new-button">
<title>New Posts</title>
<circle class="Oval-2-Copy-13" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M46.1 46.5H36c-.4 0-.8.3-.8.8v1.5c0 .4.4.7.8.7h10.1c.2 0 .4.2.4.4V60c0 .4.3.8.8.8h1.5c.4 0 .7-.4.7-.8V49.9c0-.2.2-.4.4-.4H60c.4 0 .8-.3.8-.8v-1.5c0-.4-.4-.7-.8-.7H49.9a.4.4 0 0 1-.4-.4V36c0-.4-.3-.8-.8-.8h-1.5c-.4 0-.7.4-.7.8v10.1c0 .2-.2.4-.4.4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48 69a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0 3a24 24 0 1 1 0-48 24 24 0 0 1 0 48z"/>
</g>
<g class="bin-button" transform="translate(0 240)">
<title>Deleted Posts</title>
<circle class="Oval-2-Copy-12" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M57 28v-3.8H39.2V28h-10v8.2h4.4v35.5h29V36.3h4.3V28H57zm-15.7-1.8h13.6v1.9H41.3v-1.9zm19.2 43.6H35.7V36.3h24.8v33.5zM65 34.2H31.3v-4H65v4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M41 42.7h2v20.7h-2zm6.1 0h2v20.7h-2zm6.1 0h2.1v20.7h-2.1z"/>
</g>
</g>
<g class="home-menu" transform="translate(229 18)">
<g class="portfolio-button" transform="translate(119)">
<title>Portfolio</title>
<circle class="Oval-2-Copy-4" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 46v-5.6c0-3.5-2.9-6.4-6.4-6.4h-7l-1-3.5c-.6-1.8-2.3-3-4.1-3H42.9a4.3 4.3 0 0 0-4 3L37.8 34h-7a6.4 6.4 0 0 0-6.4 6.4V46c0 .5.3.9.7 1l1 .4v15.5c0 3.5 2.8 6.4 6.4 6.4h31c3.6 0 6.5-2.9 6.5-6.4V47.3l1-.4c.3-.1.6-.5.6-1zM40.9 31c.3-.9 1.1-1.5 2-1.5h10.2c.9 0 1.7.6 2 1.5l.9 3H40l1-3zm-14.3 9.3c0-2.3 1.9-4.2 4.2-4.2h34.4a4.3 4.3 0 0 1 4.2 4.2v4.8L48 53.5l-21.4-8.3v-4.8zm41.2 22.4a4.3 4.3 0 0 1-4.2 4.3H32.4c-2.3 0-4.2-2-4.2-4.3V48l19.4 7.5h.8L67.8 48v14.7z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.5 45a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0zm-6.8 0a2.3 2.3 0 1 1 2.3 2.3c-1.3 0-2.3-1-2.3-2.4z"/>
</g>
<g class="testimonials-button" transform="translate(0 23)">
<title>Testimonials</title>
<circle class="Oval-2-Copy-6" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.9 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.7-9.1 10.8 10.8 0 0 1 21.6 0c0 7-3.6 16.9-13.7 21.1l-.3.1c-1.1.5-3 1.3-4.6 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.3 1.8-2 4.2-3.6 5.4-1 1-2.4 1.8-4 2.8l-.5.2c-1.2.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.6.4 2.1 0 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-4-8.8-8.9-8.8zM27.4 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.6-9.1 10.8 10.8 0 0 1 21.5 0 23 23 0 0 1-13.7 21.1l-.2.1c-1.2.5-3 1.3-4.7 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.4 1.8-2 4.2-3.5 5.4-1.2 1-2.5 1.8-4.2 2.8l-.4.2c-1.1.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.9.6 3.7-.6 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-3.9-8.8-8.9-8.8z"/>
</g>
<g class="contact-button" transform="translate(239 23)">\
<title>Contact Us</title>
<circle class="Oval-2-Copy-5" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M40.4 42.7c1.4 0 1.4 2 0 2H29.1L36 56.3l7-7c1.1-1 2.5.4 1.6 1.4L37 58.2l3.4 6h21.5a290 290 0 0 0-6.5-10c-.7-1.3 1-2.4 1.8-1.2l2.5 3.8h9l-.4-4.7H57.9c-1.4 0-1.4-2 0-2h10.2l-.4-5.4h-5.8c-1.4 0-1.4-2 0-2h6.7c.6 0 1.1.3 1.1 1 .6 7 1.6 14.5 1.9 21.4a1 1 0 0 1-1.1 1H25.4a1 1 0 0 1-1-1l1.9-21.5c0-.4.5-1 1.1-1h13zM28.2 47l-1.6 17H38l-9.7-17zm36 17h5.2l-.5-5.3h-8l3.3 5.4zm-14-9.2c-2.7-3.3-8.7-11.7-8.7-16.1 0-5.4 4.4-9.4 9.6-9.4 5.1 0 9.7 4 9.7 9.4 0 4.4-6.1 12.8-9 16.1-.3.6-1 .5-1.5 0zm.9-2.2c2.3-2.8 7.5-10.5 7.5-14 0-4.2-3.5-7.1-7.5-7.1s-7.4 3-7.4 7.2c0 3.4 5.2 11.1 7.4 14zm0-19c2.3 0 4.2 2 4.2 4.3 0 2.2-1.9 4-4.2 4a4.1 4.1 0 0 1 0-8.2zm0 2.1c-1.1 0-2 1-2 2.2 0 1 .9 2 2 2a2 2 0 0 0 2.1-2c0-1.3-.9-2.2-2.1-2.2z"/>
</g>
</g>
<g class="settings-menu" transform="translate(228 654)">
<g class="security-button" transform="translate(120 24)">
<title>Secuirty Settings</title>
<circle class="Oval-2-Copy-8" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48.2 64.6c.5 0 1-.5 1-1v-4.8A4 4 0 0 0 48 51a4 4 0 0 0-.9 8v4.6c0 .6.5 1 1 1zM46 55a2 2 0 1 1 3.9 0 2 2 0 0 1-4 0zm19.2-3.1c.5 0 1-.5 1-1v-4c0-2.2-1.9-4-4.2-4h-3.3v-8.3a10.6 10.6 0 0 0-21.3 0v8.2h-3.3A4.2 4.2 0 0 0 30 47v20.4c0 2.3 1.9 4.2 4.2 4.2h28c2.2 0 4.1-1.9 4.1-4.2V57.3a1 1 0 1 0-2 0v10.1c0 1.2-1 2.1-2.2 2.1h-28a2 2 0 0 1-2-2V47a2 2 0 0 1 2-2.1h28a2 2 0 0 1 2.1 2v4c0 .5.5 1 1 1zm-8.6-9h-17v-8.3a8.5 8.5 0 0 1 17 0v8.2z"/>
</g>
<g class="profile-button">
<title>Profile Settings</title>
<circle class="Oval-2-Copy-9" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M60.7 46.5a14.9 14.9 0 1 0-25.6 0A21.7 21.7 0 0 0 26.3 64v3.3c0 2.3 1.9 4.2 4.2 4.2h34.8c2.3 0 4.2-1.9 4.2-4.2V64c0-6.9-3.3-13.3-8.8-17.4zM48 26.4a12.6 12.6 0 0 1 10.3 19.8A12.6 12.6 0 1 1 48 26.4zm19.2 40.8c0 1-.8 1.8-1.8 1.8H30.6c-1 0-1.9-.8-1.9-1.8v-3.3c0-6.1 3-11.8 7.8-15.5a15 15 0 0 0 11.4 5.4c4.5 0 8.6-2 11.5-5.4A19 19 0 0 1 67 64v3.3z"/>
</g>
<g class="contact-button" transform="translate(240)">
<title>Contact Settings</title>
<circle class="Oval-2-Copy-10" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M56.5 71.5L40 58.2h-9.4c-3 0-5.4-2.4-5.4-5.4v-23c0-3 2.4-5.3 5.4-5.3h34.1c3 0 5.4 2.4 5.4 5.3v23c0 3-2.4 5.4-5.3 5.4h-8.2v13.3zm-26.7-45c-2 .2-3 2.2-3 3.1v23.2c0 2.1 1 3.3 3 3.6h10.7l14.9 12.4V56.4H65c.8 0 3 .4 3-2.8 0-3.2.3-22 0-24-.2-2 0-3-3-3s-33.1-.2-35.2 0z"/>
</g>
</g>
<g class="faq-menu" transform="translate(18 229)">
<g class="writing-button" transform="translate(0 120)">
<title>Writing FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.2 26.8a8.6 8.6 0 0 0-12.1 0L29.1 55h-.2v.2l-.1.2v.1l-.1.2L24.4 70c-.1.4 0 1 .4 1.4.3.2.6.4 1 .4h.4l14.3-4.3h.2l.2-.2h.1l.1-.1h.1l28-28.2a8.6 8.6 0 0 0 0-12.2zM27.9 68.1l2.8-9.6 6.7 6.7-9.5 3zm12.2-4L32 55.8l24-24 8 8.2-24 24zm27-27.2l-1 1-8.1-8 1-1a5.7 5.7 0 0 1 8.1 0 5.6 5.6 0 0 1 0 8z"/>
</g>
<g class="reading-button" transform="translate(24)">
<title>Reading FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 70.7h-2.9V37.9h-9v-9.6H27.5v42.4h-2.9V25.4h38V35h9z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.4 36.9l-8.9-9.5 2.1-2 9 9.6zm-34.1 4.6h12.1v2.9H35.3zm0 11.7h25.5v3H35.3zm0 7.2h25.5v2.9H35.3z"/>
</g>
<g class="general-button" transform="translate(24 240)">
<title>General FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M54.3 68h-4V40.5a2 2 0 0 0-2-2h-6a2 2 0 1 0 0 4h4V68h-4a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4zm-7.8-36a3.8 3.8 0 1 0 0-7.6 3.8 3.8 0 0 0 0 7.6z"/>
</g>
</g>
</g>
<g class="middle-layer" transform="translate(132 132)">
<circle class="middle-circle-backgroud" cx="264" cy="264" r="264" fill="#000" fill-opacity=".4"/>
<g class="button-group">
<g class="settings-button" transform="translate(216 408)">
<title>Settings Menu</title>
<circle class="Oval-2-Copy-3" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M49.4 30.5a6.2 6.2 0 0 1 0 12.2v24.6a1.4 1.4 0 0 1-2.8 0V42.7a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 2.8 0v1.6zm-4.8 6.1a3.4 3.4 0 1 0 6.8 0 3.4 3.4 0 0 0-6.8 0zm-12.4 17a6.2 6.2 0 0 1 0 12.1v1.6a1.4 1.4 0 0 1-3 0v-1.6a6.2 6.2 0 0 1 0-12.1V28.9a1.4 1.4 0 0 1 3 0v24.7zm-4.8 6a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0zM66.7 45a6.2 6.2 0 0 1 0 12v10.3a1.4 1.4 0 0 1-2.9 0V57.1a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 3 0v16zM62 51a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0z"/>
</g>
<g class="faq-button" transform="translate(24 217)">
<title>FAQ Menu</title>
<circle class="Oval-2-Copy" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" stroke="#fff" d="M36.5 38.8c.6 0 1.2-.5 1.2-1.2a11 11 0 0 1 11.8-11 11 11 0 0 1 10 11.3c-.1 5.2-3.8 9.7-8.9 10.5a3.4 3.4 0 0 0-2.6 3.4v6a1.2 1.2 0 0 0 2.4 0v-6c0-1 .5-1 .7-1a13 13 0 0 0 10.8-12.9 13.3 13.3 0 1 0-26.6-.3c0 .7.5 1.2 1.2 1.2z"/>
<g class="Shape" fill-rule="nonzero">
<use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/>
<path stroke="#fff" d="M45.6 67.9a3.6 3.6 0 1 0 7.3 0c0-2-1.7-3.7-3.7-3.7s-3.6 1.6-3.6 3.7zm5.9 0c0 1.2-1 2.2-2.3 2.2-1.3 0-2.3-1-2.3-2.2 0-1.3 1-2.3 2.3-2.3 1.3 0 2.3 1 2.3 2.3z"/>
</g>
</g>
<g class="home-button" transform="translate(216 24)">
<title>Home Menu</title>
<circle class="Oval-2-Copy-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M64.2 46.8c-.7 0-1.3.6-1.3 1.3v20.7h-7.3v-8a7.1 7.1 0 0 0-14.3 0v8H34V48.1a1.3 1.3 0 0 0-2.7 0v22c0 .8.6 1.4 1.4 1.4h10c.7 0 1.3-.6 1.3-1.3v-9.3a4.5 4.5 0 0 1 9 0v9.3c0 .7.5 1.3 1.2 1.3h10c.7 0 1.3-.6 1.3-1.3v-22c0-.8-.6-1.4-1.3-1.4zm6-1.2L49.3 25c-.5-.5-1.4-.5-2 0L26.8 45.6a1.3 1.3 0 1 0 2 2l19.7-19.9 19.9 19.8a1.3 1.3 0 1 0 1.8-1.9z"/>
</g>
<g class="more-button" transform="translate(408 217)">
<title>More Menu</title>
<circle class="Oval-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M29.8 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9 3.2 0 5.9-2.7 5.9-5.9S33 42 29.8 42zM48 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9A5.9 5.9 0 1 0 48 42zm18.2 0a5.9 5.9 0 0 0-5.9 5.8c0 3.2 2.7 5.9 5.9 5.9S72 51 72 47.8 69.4 42 66.2 42zm-36.4 2.6c1.8 0 3.3 1.4 3.3 3.2 0 1.8-1.5 3.3-3.3 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.3-3.3c0-1.8 1.5-3.2 3.3-3.2z"/>
</g>
</g>
</g>
<g class="main-menu" transform="translate(276 276)">
<title>Main Menu</title>
<circle class="inner-circle-background" cx="120" cy="120" r="120" fill="#000" opacity=".4"/>
<g class="menu-button" fill="#fff" fill-rule="nonzero" transform="translate(84 95)">
{{--<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>--}}
<path class="Shape" d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</g>
</g>
</g>
</g>
</svg>
I'm completely newbie to use svg, is there any way that I can use my custom icon with custom size just using path element?
Next I'm using your original path element instead of the icon already there. You can use any icon you want and of any size if you put it inside a <symbol> element.
How did I do it: the <symbol> element has a viewBox="0 -11 72 72" Please note that the symbol is a square pf 72/72 units.
When you use a symbol you can give the <use> element a x and a y attributes to position the icon where you need. You also can give the <use> element a width and a height attributes to size it to your needs.
In order to get the value for the <symbol> element you may use the .getBBox() method for the content of the symbol. In this case I did: Shape.getBBox(). I hope it helps.
<use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<symbol id="test" viewBox="0 -11 72 72">
<path id="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
</symbol>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />
</g>
</g>
</g>
</g>
</g>
</svg>
I am trying to display Arabic text by replacing English words in span elements. But it interchanged by its words.
I have tried by adding direction, xml: lang, unicode-bidi to svg attributes. It changes to RTL but it did not changes order
Please refer this fiddles:
Expected output with english words modelOutput.
<!DOCTYPE html>
<html>
<head>
<title>SVG with english words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">Browsers</tspan><tspan
x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
Actual output actual.
<!DOCTYPE html>
<html>
<head>
<title>SVG with Arabic words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan
x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
I expect that Browsers will be replaced with متصفح ذكي. Similarly opera with ايفون.
Actual output image actual.
Expected output expect.
Can anyone help me to acheive this?
The problem arises because the sequence " : " has no defined direction. Unicode has a group of bidirectional control characters that help with the interpretation of such situations. If you insert a left-to-right mark between the كروم and the following interpunction, it is made clear everything that follows goes left-to-right.
While in HTML the mark could be written as , this does not work inside the SVG namespace, which is pure XML. There you have to use the numeric entity instead. The extra <tspan> I introduced is not strictly neccesary, but it makes reading of the code a bit easier - otherwise the apparent order on the screen would be a bit confusing.
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan><tspan> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
Wouldn't live be easier without bugs? Theoretically, that should be the solution, and in Chrome in fact it is. In Firefox, the width of a rtl <tspan> is computed wrong, and the following ltr part disappears to the right. The best workaround I can find is to change the layout a bit so that the percentage number appears right-aligned at the end of the second line:
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan><tspan text-anchor="end" x="107"> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
I tried to add keySplines, values, keyTimes attributes to animate element to simulate easing animation. Easing effect doesn't work.
jsfiddle
HTML
<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
<path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
<animate class="triangle-animation" attributeType="XML" attributeName="d" from="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z" to="M765,22L765,15L505.00002429484215,15L490.00002429484215,0L475.00002429484215,15L0.5,15L0.5,21.5" dur="4s" repeatCount="1" fill="freeze" keySplines=" 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" begin="indefinite"></animate>
</path>
</svg>
<button id="btn">Click me</button>
JS
document.getElementById("btn").onclick = function(e) {
console.log('anim');
document.querySelector('.triangle-animation').beginElement();
}
If you use keyTimes, you either must provide a values list with a matching number of semicolon-separated entries, or if you use from and to, keyTimes must be "0;1" and keySplines must contain only one entry.
The path definitions in the values list must structurally match, with only numbers differing. If one has a closing Z command, every value needs one. Exception: Optional command letters (for repetitions of the same command) can be used or left out.
Bonus: your example doesn't need javascript to start with a button click. Just set begin="btn.click".
<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
<path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
<animate class="triangle-animation" attributeType="XML" attributeName="d" values="
M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z;
M765 22 765 15 239 15 225 0 211 15 L0.5 15 L0.5 21.5 Z;
M765 22 765 15 505 15 L490 0 L475 15 L0.5 15 L0.5 21.5 Z"
keySplines="0.1 0.8 0.2 1;0.1 0.8 0.2 1"
keyTimes="0;0.5;1"
dur="4s" repeatCount="1" fill="freeze" calcMode="spline" begin="btn.click"></animate>
</path>
</svg>
<button id="btn">Click me</button>
I was missing Z in to attribute. Working jsfiddle.
The use tag in my SVG works on Chrome latest versions (58, 59, maybe 50+),
but not work on Chrome 46 (maybe 40+). why?
<svg>
<defs>
<g id="diamond" viewBox="0 0 120 60" enable-background="new 0 0 120 60">
<path d="M 11 -24 L 44 -6 Q 55 0 44 6
L 11 24 Q 0 30 -11 24
L -44 6 Q -55 0 -44 -6
L -11 -24 Q 0 -30 11 -24" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2px" stroke-miterlimit="10"></path>
</g>
</defs>
<g>
<use href="#diamond" transform="translate(60,30)" class="diamond" style="opacity: 1;"></use>
</g>
</svg>
The ability to write href rather than xlink:href is fairly new. It's a part of the SVG 2 specification. The SVG 1.1 specification only defines xlink:href.
If you need to target old browsers, or Safari, you'll need to use xlink:href as well or instead of href.
I made a responsive animation grid with SVG, but I dont know why my circles are stretched. When I resize window in some proportions, then circles looks nice.
There you can see - JSFiddle
This is my SVG Code
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="secondLine" d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="thirdLine" d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#firstLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#secondLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#thirdLine"/>
</animateMotion>
</circle>
<circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
</circle>
</svg>
Maybe you dont need it now but I could do it giving the viewbox the desired ratio:
i.e: 0 0 100 100 for an square ratio
0 0 25 100 for an vertical ratio
0 0 100 25 for a horizontal ratio.
Then give to the svg tag a width and height of 100% and put the svg tag inside a div, this way I can keep the ratio of the circles, lines, other draws without stretching when the user resizes the window.