Masked svg element not showing whole svg item - html
In this example I am trying to scroll a masked container item using transform: translate and animation: infinite.
Problem is that only a small partition of the masked container item is scrolling. How would I get it scrolling as it does in the imgur link below?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
margin: 20px;
}
#code-main {
animation: code 3s infinite;
}
#keyframes code {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 150px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<svg width="712" height="670" viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector" d="M516.326 380.047V565.042L547.27 615.472L549.625 619.308H671.722L674.189 380.047H516.326Z" fill="#E6E6E6"/>
<path id="Vector_2" opacity="0.1" d="M516.326 380.047V565.042L547.27 615.472L549.169 380.047H516.326Z" fill="black"/>
<path id="Vector_3" d="M221.566 375.113V560.109L190.622 610.539L188.267 614.374H66.17L63.703 375.113H221.566Z" fill="#E6E6E6"/>
<path id="Vector_4" opacity="0.1" d="M221.566 375.113V560.109L190.622 610.539L188.723 375.113H221.566Z" fill="black"/>
<path id="Vector_5" d="M711.188 371.414V382.513H47.67V366.48L109.335 334.414H656.923L711.188 371.414Z" fill="#E6E6E6"/>
<path id="Vector_6" opacity="0.1" d="M711.188 371.414V382.513H47.67V366.48L711.188 371.414Z" fill="black"/>
<path id="Vector_7" d="M142.635 426.912H113.035L100.702 418.279H156.201L142.635 426.912Z" fill="#3F3D56"/>
<path id="Vector_8" d="M142.635 462.678H113.035L100.702 454.045H156.201L142.635 462.678Z" fill="#3F3D56"/>
<path id="Vector_9" d="M142.635 513.244H113.035L100.702 504.61H156.201L142.635 513.244Z" fill="#3F3D56"/>
<path id="Vector_10" d="M142.635 563.809H113.035L100.702 555.176H156.201L142.635 563.809Z" fill="#3F3D56"/>
<path id="Vector_11" d="M595.257 431.845H624.857L637.19 423.212H581.691L595.257 431.845Z" fill="#3F3D56"/>
<path id="Vector_12" d="M595.257 467.611H624.857L637.19 458.978H581.691L595.257 467.611Z" fill="#3F3D56"/>
<path id="Vector_13" d="M595.257 518.177H624.857L637.19 509.544H581.691L595.257 518.177Z" fill="#3F3D56"/>
<path id="Vector_14" d="M595.257 568.742H624.857L637.19 560.109H581.691L595.257 568.742Z" fill="#3F3D56"/>
<path id="Vector_15" d="M490.821 127.605C491.695 127.605 492.403 126.897 492.403 126.023C492.403 125.149 491.695 124.44 490.821 124.44C489.947 124.44 489.239 125.149 489.239 126.023C489.239 126.897 489.947 127.605 490.821 127.605Z" fill="#F2F2F2"/>
<path id="Vector_16" d="M490.821 300.387C494.142 300.387 496.834 297.695 496.834 294.374C496.834 291.053 494.142 288.362 490.821 288.362C487.5 288.362 484.809 291.053 484.809 294.374C484.809 297.695 487.5 300.387 490.821 300.387Z" fill="#F2F2F2"/>
<path id="Vector_17" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981L315.632 346.589H477.971L481.452 357.981Z" fill="#3F3D56"/>
<path id="Vector_18" d="M546.97 354.883C546.659 356.208 545.489 357.607 542.843 358.93C533.35 363.677 514.046 357.664 514.046 357.664C514.046 357.664 499.173 355.133 499.173 348.487C499.59 348.201 500.026 347.942 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="#3F3D56"/>
<path id="Vector_19" opacity="0.1" d="M546.97 354.883C535.35 359.335 524.992 359.667 514.363 352.284C510.343 349.313 505.476 347.71 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="black"/>
<path id="Vector_20" d="M532.4 352.284C534.672 352.284 536.514 351.718 536.514 351.019C536.514 350.32 534.672 349.753 532.4 349.753C530.128 349.753 528.286 350.32 528.286 351.019C528.286 351.718 530.128 352.284 532.4 352.284Z" fill="#F2F2F2"/>
<path id="Vector_21" opacity="0.1" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981H481.452Z" fill="black"/>
<path id="Vector_22" d="M94.6615 0.0286924C92.9336 -0.113172 91.2035 0.273333 89.7002 1.13699C88.2242 2.14779 87.2939 3.91861 86.3443 5.56646C82.7136 11.9421 77.7985 17.4942 71.9101 21.8711C67.6211 25.0131 62.1684 28.9308 62.9022 34.7238C63.2893 36.6369 63.996 38.4711 64.9927 40.1493C68.9493 48.1363 79.7463 54.3086 78.6843 63.4224C82.6153 56.8415 77.3573 53.5874 81.2883 47.0065C83.1604 43.8725 86.4124 40.3348 89.2388 42.303C90.1852 42.962 90.8066 44.1439 91.792 44.7222C94.1432 46.1019 96.6446 43.4642 98.7259 41.5958C105.903 35.1532 116.109 36.841 125.04 38.8484C129.256 39.7961 133.887 41.0394 136.379 45.0691C139.656 50.3673 133.266 56.0894 131.651 62.0796C131.52 62.59 131.513 63.1248 131.633 63.6381C131.753 64.1514 131.996 64.6281 132.34 65.0273C132.684 65.4266 133.12 65.7365 133.61 65.9305C134.1 66.1246 134.63 66.1971 135.154 66.1417C137.834 65.8774 141.009 65.6607 141.167 64.4848C144.539 64.6048 148.67 64.223 150.114 60.7123C150.556 59.3233 150.789 57.8765 150.807 56.4191C151.337 50.5219 153.84 45.1419 155.498 39.5292C157.156 33.9164 157.877 27.3387 155.079 22.3624C154.08 20.7067 152.845 19.2057 151.413 17.9068C135.534 2.54006 114.657 0.00588238 94.6615 0.0286924Z" fill="#2F2E41"/>
<path id="Vector_23" d="M82.1377 74.9337C82.1377 74.9337 85.5911 103.712 72.9286 106.014C60.2661 108.317 84.4399 147.455 84.4399 147.455L141.997 154.362L128.183 108.317C128.183 108.317 118.974 104.863 124.73 81.8406C130.485 58.8178 82.1377 74.9337 82.1377 74.9337Z" fill="#FFB8B8"/>
<path id="Vector_24" d="M47.028 569.347L51.633 632.66H75.806L68.9 569.347H47.028Z" fill="#FFB8B8"/>
<path id="Vector_25" d="M224.303 449.629L227.756 502.581L254.233 491.07L243.872 447.327L224.303 449.629Z" fill="#FFB8B8"/>
<path id="Vector_26" d="M29.761 327.608C29.761 327.608 30.9121 394.374 37.819 416.246C44.7259 438.117 43.5747 439.268 42.4236 442.722C41.2724 446.175 40.1213 443.873 40.1213 449.629C40.1213 455.384 37.819 546.324 40.1213 554.382C42.4235 562.44 33.2145 576.254 40.1213 577.405C47.0281 578.556 79.2599 577.405 80.411 570.498C81.5622 563.591 71.202 561.289 75.8065 556.684C80.4111 552.08 87.3179 457.687 87.3179 457.687L103.434 392.072L133.363 357.538H196.676L216.245 433.513C216.245 433.513 208.187 455.384 213.943 455.384C219.699 455.384 254.233 462.291 254.233 436.966C254.233 411.641 242.721 336.817 240.419 334.515C238.117 332.213 241.57 324.155 238.117 320.701C234.663 317.248 194.374 293.074 179.409 288.47C164.444 283.865 143.451 278.385 143.451 278.385L29.761 327.608Z" fill="#2F2E41"/>
<path id="Vector_27" d="M254.233 481.86C254.233 481.86 236.966 476.105 228.908 493.372C220.85 510.639 224.303 515.243 224.303 515.243C224.303 515.243 250.779 524.452 255.384 519.848C257.387 517.845 263.748 517.149 270.296 517.002C280.269 516.778 282.923 502.668 273.504 499.383C273.223 499.285 272.939 499.2 272.651 499.127C263.442 496.825 254.233 481.86 254.233 481.86Z" fill="#2F2E41"/>
<path id="Vector_28" d="M108.038 93.9275C127.111 93.9275 142.572 78.4661 142.572 59.3934C142.572 40.3208 127.111 24.8593 108.038 24.8593C88.9656 24.8593 73.5042 40.3208 73.5042 59.3934C73.5042 78.4661 88.9656 93.9275 108.038 93.9275Z" fill="#FFB8B8"/>
<path id="Vector_29" d="M63.144 120.404C63.144 120.404 119.55 131.915 133.363 113.497C147.177 95.0786 152.933 165.298 152.933 165.298L159.839 238.971L149.479 279.26C149.479 279.26 95.3758 323.004 78.1087 326.457C60.8417 329.91 34.3655 332.213 34.3655 332.213C34.3655 332.213 42.4236 204.437 42.4236 202.134C42.4236 199.832 63.144 120.404 63.144 120.404Z" fill="#6C63FF"/>
<path id="Vector_30" d="M80.2983 98.8144C80.2983 98.8144 67.7485 91.6252 64.2951 98.532C60.8417 105.439 28.6099 122.706 25.1565 122.706C21.7031 122.706 32.0633 218.25 27.4587 229.762C22.8542 241.273 0.982611 325.306 13.6451 332.213C26.3076 339.119 17.0985 325.306 29.761 342.573C42.4235 359.84 104.585 359.84 108.038 352.933C111.492 346.026 80.411 294.225 86.1667 245.877C91.9224 197.53 101.131 130.764 93.0735 121.555C85.0156 112.346 80.2983 98.8144 80.2983 98.8144Z" fill="#2F2E41"/>
<path id="Vector_31" d="M121.852 106.59L123.455 101.072C123.455 101.072 171.351 116.95 173.653 127.31C175.955 137.671 174.804 210.192 166.746 215.948C158.688 221.704 147.177 230.913 155.235 244.726C163.293 258.54 172.502 273.505 179.409 274.656C186.316 275.807 198.978 283.865 195.525 291.923C192.071 299.981 150.63 285.016 150.63 285.016C150.63 285.016 123.003 264.296 124.154 232.064C125.305 199.832 121.852 106.59 121.852 106.59Z" fill="#2F2E41"/>
<path id="Vector_32" d="M162.142 242.424L134.514 294.225C134.514 294.225 94.2246 335.666 117.247 340.271C140.27 344.875 152.933 302.283 152.933 302.283L182.862 259.691L162.142 242.424Z" fill="#FFB8B8"/>
<path id="Vector_33" d="M96.3438 9.06446C94.9518 8.96132 93.5575 9.23175 92.3051 9.8478C91.1726 10.6749 90.2393 11.7445 89.5733 12.9785C86.5029 17.5971 82.5005 21.5224 77.8232 24.5025C74.3318 26.7233 69.893 29.4922 70.4904 33.5867C70.8146 34.9595 71.3917 36.2599 72.1922 37.4214C75.4241 43.1236 76.7108 49.7234 75.8574 56.2221L85.4575 42.2681C86.9814 40.053 89.6287 37.5526 91.9296 38.9437C92.6999 39.4095 93.2058 40.2449 94.0079 40.6535C95.9219 41.6287 97.9581 39.7644 99.6524 38.4439C105.495 33.8903 113.803 35.0832 121.073 36.502C124.505 37.1718 128.275 38.0506 130.304 40.8987C133.676 45.6319 130.155 52.4709 132.123 57.9388C132.674 57.5531 133.141 57.0608 133.498 56.491C133.855 55.9211 134.095 55.2855 134.201 54.6216C136.946 54.7064 140.309 54.4366 141.485 51.9552C141.842 50.9828 142.033 49.9568 142.049 48.9208C142.48 44.7527 144.518 40.9502 145.867 36.9831C147.217 33.0161 147.804 28.367 145.526 24.8497C144.693 23.658 143.687 22.5967 142.542 21.7006C129.616 10.8395 112.621 9.04834 96.3438 9.06446Z" fill="#2F2E41"/>
<path id="Vector_34" d="M162.142 122.706L172.867 125.553C172.867 125.553 197.827 189.472 192.071 233.215C186.316 276.958 182.862 267.749 182.862 267.749C182.862 267.749 173.653 247.029 152.933 251.633L162.142 122.706Z" fill="#2F2E41"/>
<path id="Vector_35" d="M48.6229 624.292C45.847 628.064 46.4035 633.456 43.9446 637.443C41.8132 640.898 37.7962 642.71 35.1302 645.771C34.2795 646.788 33.5212 647.879 32.8641 649.031C30.391 653.174 28.3808 658.483 30.8165 662.648C32.7758 665.998 36.8943 667.307 40.6715 668.2C45.4455 669.328 50.4058 670.23 55.235 669.368C60.0642 668.506 64.7838 665.549 66.5057 660.956C66.8441 659.801 67.2464 658.666 67.7108 657.555C70.3282 652.402 78.5383 652.347 81.217 647.225C83.0917 643.641 81.3684 639.309 79.6459 635.649L74.3848 624.472C72.6389 620.763 65.5611 622.896 61.8714 622.007C57.0591 620.848 52.0848 619.571 48.6229 624.292Z" fill="#2F2E41"/>
<path id="Vector_36" d="M10.1917 265.447L58.5394 340.271C58.5394 340.271 88.4689 378.258 97.678 360.991C106.887 343.724 65.4462 314.946 65.4462 314.946L34.3655 257.389L10.1917 265.447Z" fill="#FFB8B8"/>
<path id="Vector_37" d="M34.3655 125.008L25.1564 122.706C25.1564 122.706 6.73827 128.462 2.13372 152.635C-2.47081 176.809 0.982583 273.505 6.73826 274.656C12.4939 275.807 35.1655 257.819 38.7945 261.633C42.4235 265.447 30.9121 245.877 34.3655 235.517C37.8189 225.157 34.3655 125.008 34.3655 125.008Z" fill="#2F2E41"/>
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="366" y="130" width="250" height="140">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)">
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group 15">
<path id="Rectangle 59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" width="200.839" height="360.444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="711.188" height="669.683" fill="white"/>
</clipPath>
</defs>
</svg>
</body>
</html>
Codepen: https://codepen.io/DevKris/pen/KKpVxVa
Desired outcome: https://imgur.com/a/lG7vgem
You need to reuse the #Group15 several times:
Also I would use ids with no sapces: i.e. id="Group15" instead of id="Group 15"
I hope this is what you are asking.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align:center;
margin: 20px;
}
#code-main {
animation: code 3s infinite;
}
#keyframes code {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 150px);
}
}
<svg width="712" height="670" viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)" >
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group15">
<path id="Rectangle59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
<use xlink:href="#Group15" y="-45" />
<use xlink:href="#Group15" y="-90" />
<use xlink:href="#Group15" y="-135" />
<use xlink:href="#Group15" y="-180" />
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" width="200.839" height="360.444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="711.188" height="669.683" fill="white"/>
</clipPath>
</defs>
</svg>
Related
How to make svg width and height response
I have a customized svg not sure how to make it responsive. if a set div width greater than 500px and this svg is not able to strecth as per the div width.
function expanddiv(){$('#expand').width('600')};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="expand" style="width:300px;border:2px solid black;height:62px;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<defs>
<style>
.cls-1{fill:url(#linear-gradient)}.cls-2{clip-path:url(#clip-path)}.cls-3{fill:#fff}.cls-4{fill:#ed4d67}.cls-5,.cls-7{fill:#eb384f}.cls-5{font-size:15px;font-family:Roboto-Regular,Roboto}.cls-6{fill:#000}
</style>
<linearGradient id="linear-gradient" x1="1.124" x2=".282" y1="1.059" y2=".569" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#7e0947"/>
<stop offset="1" stop-color="#ed4d67"/>
</linearGradient>
<clipPath id="clip-path">
<path id="Path_3041" d="M12 0h309a12 12 0 0 1 12 12v50H0V12A12 12 0 0 1 12 0z" class="cls-1" data-name="Path 3041" transform="translate(2691 -2049)"/>
</clipPath>
</defs>
<g id="Group_6848" data-name="Group 6848" transform="translate(-2691 2049)">
<path id="Path_2603" d="M12 0h309a12 12 0 0 1 12 12v50H0V12A12 12 0 0 1 12 0z" class="cls-1" data-name="Path 2603" transform="translate(2691 -2049)"/>
<g id="Mask_Group_23" class="cls-2" data-name="Mask Group 23">
<rect id="Rectangle_1748" width="159" height="159" class="cls-3" data-name="Rectangle 1748" rx="29" transform="rotate(45 3950.617 2228.04)"/>
</g>
<g id="Icon" transform="translate(2352.59 -2342.063)">
<g id="Group_620" data-name="Group 620" transform="translate(358.409 308.063)">
<path id="Path_357" d="M474.036 499.32v8.98a3.56 3.56 0 0 1-3.56 3.56h-20.71l5.427-5.391h11.027c1.7 0 2.486-1.4 2.486-3.092v-4.057z" data-name="Path 357" transform="translate(-442.202 -483.485)"/>
<path id="Path_358" d="M386.682 308.063h-24.713a3.56 3.56 0 0 0-3.56 3.56v10.564h5.3V315.8a2.409 2.409 0 0 1 2.409-2.409H382.5a2.409 2.409 0 0 1 2.409 2.409v1.079h5.33v-5.257a3.56 3.56 0 0 0-3.557-3.559z" data-name="Path 358" transform="translate(-358.409 -308.063)"/>
<path id="Path_359" d="M382.352 414.937l-22.6 22.7a.749.749 0 0 1-1.286-.554l-.058-15.126h5.276v4.127l11.167-11.148z" class="cls-4" data-name="Path 359" transform="translate(-358.409 -406.089)"/>
</g>
<text id="salesken" class="cls-5" transform="translate(398.941 326.461)">
<tspan x="0" y="0" class="cls-6">Test</tspan><tspan y="0" class="cls-7">div</tspan>
</text>
</g>
</g>
</svg>
</div>
<button onclick="expanddiv()" style="margin-top:20px;">
expand div
</button>
Error, fixed container not succesfull using Css and Bootstrap
I have a problem with the fixed property of css. When I apply it to my container with id="avatar", it "disappears"(As shown in the picture)
the div with the classes col-md-5 col-sm-12 order-1 order-md-0 contains all items on the left side.
The goal is that all the items on the left side can scroll and the avatar on the right side remains "fixed". But, I have not succeeded, what am I failing?
#main {
position: sticky;
top: 2px;
bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col-md-5 col-sm-12 order-1 order-md-0">
<div class="row"></div>
<div class="row justify-content-center"></div>
<div id="imagesDiv"></div>
</div>
<div id="avatar" class="col-md-7 col-sm-12 order-0 order-md-1">
<main id="main" class="mx-auto">
<svg viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="react-path-1" cx="120" cy="120" r="120"></circle>
<path d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z" id="react-path-2"></path>
<path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="react-path-3"></path>
</defs>
<g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle">
<g transform="translate(825.000000, 1100.000000)">
<g id="background"></g>
<g id="Mask"></g>
<g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-5)">
<g id="Body" transform="translate(32.000000, 36.000000)">
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-6" fill="white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use></mask>
<use xmlns="http://www.w3.org/2000/svg" fill="#D0C6AC" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use>
<g class="color-picker-Body" mask="url(#react-mask-6)" fill="#FD9841">
<g transform="translate(0.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="264" height="280"></rect>
</g>
</g>
<path xmlns="http://www.w3.org/2000/svg" d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#react-mask-6)"></path>
</g>
<g id="Clothing" transform="translate(0.000000, 170.000000)"><path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="#B7C1DB"></path>
<mask id="mask0_0_366" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="14" width="200" height="96">
<path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="white"></path>
</mask>
<g mask="url(#mask0_0_366)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M102 63.3365C99.5284 62.4949 97.1884 61.5523 95 60.5196V110H102V63.3365ZM162 63.3365C164.472 62.4949 166.812 61.5523 169 60.5196V98.5C169 100.433 167.433 102 165.5 102C163.567 102 162 100.433 162 98.5V63.3365Z" fill="#F4F4F4"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M132 68C162.928 68 188 54.5686 188 38C188 28.137 179.115 19.3856 165.4 13.9175C185.194 18.941 198.5 28.2929 198.5 39C198.5 55.0163 168.727 68 132 68ZM98.6004 13.9175C84.8847 19.3856 76 28.137 76 38C76 54.5686 101.072 68 132 68C95.2731 68 65.5 55.0163 65.5 39C65.5 28.2929 78.806 18.941 98.6004 13.9175Z" fill="black" fill-opacity="0.16"></path>
</g></g>
<g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000">
<g id="eyes" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964"><circle cx="30" cy="22" r="14" fill="white"></circle>
<circle cx="82" cy="22" r="14" fill="white"></circle>
<circle class="eyesColor" cx="30" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
<circle class="eyesColor" cx="82" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
</g>
<g id="eyeBrow" fill-opacity="0.599999964"><g xmlns="http://www.w3.org/2000/svg" fill-opacity="0.599999964">
<g id="I-Browse" transform="translate(0.000000, 0.000000)">
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M26.5473 6.1484C20.7403 6.41665 11.3522 10.6363 11.5941 16.4922C11.6021 16.6839 11.8836 16.768 12.0211 16.6206C14.776 13.6613 34.3365 10.6709 41.2261 12.2556C41.8566 12.4008 42.3356 11.7788 41.9363 11.3294C38.5142 7.48119 31.7498 5.90302 26.5473 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M86.4526 6.1484C92.2596 6.41665 101.648 10.6363 101.406 16.4922C101.398 16.6839 101.116 16.768 100.979 16.6206C98.2238 13.6613 78.6634 10.6709 71.7738 12.2556C71.1433 12.4008 70.6642 11.7788 71.0636 11.3294C74.4857 7.48119 81.2501 5.90302 86.4526 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
</g>
</g>
</g>
<g id="mouth"><g transform="translate(0.000000, 50.000000)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="black" fill-opacity="0.7"></path>
<mask id="mask0_0_636" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="13" width="38" height="19">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="white"></path>
</mask>
</g>
</g>
<g id="nose"><g xmlns="http://www.w3.org/2000/svg" id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
<path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose"></path>
</g></g>
<g id="beard"></g>
</g>
<g id="TopA" stroke-width="1" fill-rule="evenodd"><defs xmlns="http://www.w3.org/2000/svg">
<rect id="react-path-197" x="0" y="0" width="264" height="280"></rect>
<path d="M180.14998,39.9204083 C177.390206,37.1003988 174.185913,34.7068297 171.069252,32.3065503 C170.381566,31.777442 169.682843,31.2610833 169.010544,30.7118441 C168.857687,30.5870323 167.291999,29.4657388 167.104691,29.0530544 C166.653816,28.0602634 166.915042,28.8332916 166.977255,27.6485857 C167.055857,26.150508 170.11064,21.9193194 167.831176,20.9490079 C166.828413,20.522232 165.039628,21.6579526 164.077671,22.0330592 C162.196235,22.7671676 160.291721,23.3932399 158.346734,23.9330847 C159.278588,22.0763407 161.055333,18.3594977 157.71591,19.3543018 C155.114345,20.1293431 152.690052,22.1219709 150.075777,23.0594018 C150.940735,21.6415124 154.399901,17.2479341 151.274209,17.0023366 C150.301549,16.925839 147.471201,18.7503735 146.423952,19.1395717 C143.287223,20.3054888 140.083264,21.0590571 136.789999,21.6525844 C125.59203,23.6707114 112.497238,23.0953019 102.1368,28.1934632 C94.1494796,32.1236942 86.262502,38.2220278 81.648386,45.987539 C77.2011742,53.472559 75.537818,61.6641751 74.6069673,70.2412987 C73.9239644,76.535909 73.8684412,83.0425652 74.1878671,89.3599905 C74.2922241,91.4297869 74.5250203,100.970847 77.5319724,98.0813859 C79.0300967,96.641688 79.019059,90.8282073 79.3963495,88.8604076 C80.1472513,84.9452748 80.870057,81.0126951 82.122006,77.2227096 C84.3282191,70.5439339 86.9307879,63.4296587 92.4269209,58.8297383 C95.9539853,55.8782066 98.4307906,51.8889248 101.806002,48.9112229 C103.322188,47.5738572 102.165231,47.7130963 104.602902,47.888571 C106.240504,48.006337 107.885464,48.0512961 109.52641,48.0942421 C113.322394,48.1928837 117.124399,48.16772 120.921387,48.1811407 C128.56821,48.208653 136.179243,48.316689 143.818708,47.9164188 C147.213653,47.7385955 150.617965,47.6423024 154.00388,47.3282597 C155.895349,47.152785 159.251496,45.9405668 160.808488,46.8669256 C162.233362,47.7144383 163.71309,50.4817719 164.736257,51.615144 C167.153525,54.2935659 170.035717,56.3392052 172.862385,58.5354911 C178.756547,63.114945 181.732392,68.8666908 183.522515,76.023241 C185.305949,83.1532854 184.805905,89.76815 187.013456,96.78479 C187.401784,98.0184813 188.428965,100.14498 189.695296,98.2389151 C189.930434,97.8849461 189.869559,95.9390277 189.869559,94.819339 C189.869559,90.2995934 191.014141,86.9083772 190.999758,82.3591197 C190.943566,68.5271489 190.49637,50.4908308 180.14998,39.9204083 Z" id="react-path-196"></path>
<filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox" id="react-filter-193">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge>
</filter>
</defs>
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-195" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-197"></use>
</mask>
<g xmlns="http://www.w3.org/2000/svg" id="Mask"></g>
<g xmlns="http://www.w3.org/2000/svg" mask="url(#react-mask-195)">
<g transform="translate(-1.000000, 0.000000)">
<mask id="react-mask-194" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-196"></use>
</mask>
<g id="hair"><g xmlns="http://www.w3.org/2000/svg" id="Hairstyle/Wick" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="template-for-hairstyles" opacity=".184" transform="translate(1.000000, 0.000000)">
<mask id="hairstylewick-mask-2" fill="#ffffff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hairstylewick-path-1" fill="#ffffff"></use>
</mask>
<g id="Mask-Hair"></g>
</g>
<g id="Wick" transform="translate(64.000000, 22.300000)">
<path class="hairColor" d="M13.4413,160.16 C13.4413,160.16 12.3963,166.909 9.2623,170.681 C9.2623,170.681 19.7343,171.586 24.6553,166.711 C24.6553,166.711 24.2473,171.575 22.2033,175.347 C22.2033,175.347 29.0143,176.459 35.8253,171.436 C35.8253,171.436 35.8793,174.352 35.9233,176.809 C37.5833,176.694 39.2523,176.615 40.9413,176.615 L44.9413,176.615 L44.9413,157.226 C27.7043,149.038 15.3133,132.303 13.2463,112.496 C9.2963,111.938 5.9703,109.454 4.2343,106.027 L4.2343,147.355 C4.2343,147.355 4.0873,160.457 0.0003,164.329 C0.0003,164.329 8.9013,166.016 13.4413,160.16" id="Fill-4" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M133.5829,106.1463 C131.8309,109.5103 128.5389,111.9453 124.6359,112.4973 C122.5689,132.3023 110.1799,149.0373 92.9419,157.2263 L92.9409,176.6153 L96.9409,176.6153 C98.6079,176.6153 100.2559,176.6923 101.8949,176.8033 C101.9369,174.3503 101.9919,171.4363 101.9919,171.4363 C108.8029,176.4593 115.6129,175.3463 115.6129,175.3463 C113.5699,171.5753 113.1619,166.7103 113.1619,166.7103 C118.0819,171.5853 128.5549,170.6813 128.5549,170.6813 C125.4219,166.9093 124.3759,160.1603 124.3759,160.1603 C128.9159,166.0163 137.8169,164.3293 137.8169,164.3293 C133.7299,160.4573 133.5829,147.3553 133.5829,147.3553 L133.5829,106.1463 Z" id="Fill-6" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M112.3837,61.411 C112.3837,61.411 120.1617,65.499 120.1617,83.616 C120.1617,83.616 124.3837,87.112 124.3837,83.616 L124.3837,75.781 C124.3837,75.781 130.3097,75.942 133.5907,82.208 L133.5907,38.526 C133.5907,38.526 94.0077,-1.068 84.5637,0.022 C75.3547,1.084 69.2147,5.932 68.9127,6.174 C68.6107,5.932 62.4697,1.084 53.2617,0.022 C43.8177,-1.068 4.2347,38.526 4.2347,38.526 L4.2347,82.208 C7.5157,75.942 13.4417,75.781 13.4417,75.781 L13.4417,83.616 C13.4417,87.112 17.6627,83.616 17.6627,83.616 C17.6627,65.499 25.4417,61.411 25.4417,61.411 C25.4417,61.411 14.5857,56.099 34.1907,36.891 C53.1187,18.347 67.8857,33.575 68.8837,34.649 C68.8837,34.649 84.7057,18.347 103.6337,36.891 C123.2387,56.099 112.3837,61.411 112.3837,61.411" id="Fill-1" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M92.9423,157.2264 L92.9413,170.5254 C118.7923,158.6644 123.6873,127.9354 124.5233,113.4234 C122.1713,132.8224 109.9093,149.1654 92.9423,157.2264" id="Fill-8" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M13.4716,114.3524 C14.2416,129.2804 19.1006,159.2004 44.9416,170.6934 L44.9416,157.2264 C28.2446,149.2944 16.0966,133.3444 13.4716,114.3524" id="Fill-10" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
</g>
</g></g>
<g id="glass">
<g filter="url(#filter0_d_0_1711)" transform="translate(60.000000, 75.000000)">
<path d="M70.9998 13.1111C59.9624 13.1111 58.3704 4.0266 35.6704 2.74074C12.9854 1.7168 5.81505 8.44949 5.7763 13.1111C5.81307 17.4043 4.64754 28.5613 19.3645 41.6296C34.1366 57.1421 49.2702 51.8818 54.6939 46.8148C60.135 44.4731 66.3402 23.4596 70.9998 23.4815C75.6595 23.5033 81.8646 44.4731 87.3057 46.8148C92.7294 51.8818 107.863 57.1421 122.635 41.6296C137.352 28.5613 136.187 17.4043 136.223 13.1111C136.185 8.44949 129.014 1.7168 106.329 2.74074C83.6293 4.0266 82.0373 13.1111 70.9998 13.1111Z" fill="#F4F4F4"></path>
<path d="M60.1293 23.4815C60.5103 15.8233 47.2156 7.64243 32.9529 7.92593C18.6973 8.22451 16.8417 17.3787 16.647 20.8889C16.2981 29.0221 25.0144 47.3038 41.1058 46.8148C57.1972 46.3058 59.9092 28.5344 60.1293 23.4815Z" fill="#2F383B"></path>
<path d="M81.8707 23.4815C81.4897 15.8233 94.7844 7.64243 109.047 7.92593C123.303 8.22451 125.158 17.3787 125.353 20.8889C125.702 29.0221 116.986 47.3038 100.894 46.8148C84.8028 46.3058 82.0908 28.5344 81.8707 23.4815Z" fill="#2F383B"></path>
</g>
<defs>
<filter id="filter0_d_0_1711" x="5.76709" y="2.63634" width="130.465" height="51.3032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
<feOffset dy="2"></feOffset>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"></feColorMatrix>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1711"></feBlend>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1711" result="shape"></feBlend>
</filter>
</defs>
</g>
<g id="hat"></g>
<g id="beard"></g>
</g>
</g></g>
</g></g></g></g>
</svg>
</main>
</div>
</div>
SVG element disappears after apply rotate animation
When I am adding <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" /> to <g id="icon-border"> element disappears. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 65 65"> <defs> <filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse"> <feOffset input="SourceAlpha"/> <feGaussianBlur stdDeviation="7.5" result="blur"/> <feFlood flood-color="#dec652" flood-opacity="0.478"/> <feComposite operator="in" in2="blur"/> <feComposite in="SourceGraphic"/> </filter> <style> </style> </defs> <g id="Group_470" data-name="Group 470" transform="translate(-1646.5 -154.5)"> <g transform="matrix(1, 0, 0, 1, 1646.5, 154.5)" filter="url(#Ellipse_320)"> <circle id="Ellipse_320-2" data-name="Ellipse 320" cx="10" cy="10" r="10" transform="translate(22.5 22.5)" fill="#dec652"/> </g> <g id="icon-border" transform="translate(1666 174)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10"> <circle cx="13" cy="13" r="13" stroke="none"/> <circle cx="13" cy="13" r="12.5" fill="none"/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" /> </g> <g id="text-change-accept-svgrepo-com" transform="translate(1673.811 182.551)"> <path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/> <path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/> <path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/> <path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/> <path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/> </g> </g> </svg>
It this more like it? I removed many of the transform/translate. The animation on <g id="icon-border"> was fine. You just need to place the child circles in 0,0 and then transform/translate the <g> to the center. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 65 65"> <defs> <filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse"> <feOffset input="SourceAlpha"/> <feGaussianBlur stdDeviation="7.5" result="blur"/> <feFlood flood-color="#dec652" flood-opacity="0.478"/> <feComposite operator="in" in2="blur"/> <feComposite in="SourceGraphic"/> </filter> </defs> <g id="Group_470" data-name="Group 470"> <circle id="Ellipse_320-2" data-name="Ellipse 320" filter="url(#Ellipse_320)" cx="32.5" cy="32.5" r="10" fill="#dec652"/> <g id="icon-border" transform="translate(32.5 32.5)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10"> <circle cx="0" cy="0" r="13" stroke="none"/> <circle cx="0" cy="0" r="12.5"/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" dur="0.5s" additive="sum" repeatCount="indefinite" /> </g> <g id="text-change-accept-svgrepo-com" transform="translate(27.5 28.5)"> <path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/> <path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/> <path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/> <path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/> <path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/> </g> </g> </svg>
How to make circle / g / path element in SVG pulse
I have an SVG of the following map:
On the map, you will notice the orange dots. I'm looking to make these dots pulsate like this:
.pulse {
margin:100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
<span class="pulse"></span>
Challenges:
html markup cannot be used within svg's, so using the span as the demo above is not an option.
In order to make sure the dots are still positioned correctly, I've added parent g elements and moved the child transform property onto the parent.
Here is the original (simplified) map:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
<defs>
<filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.271"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
<g id="Group_975" data-name="Group 975">
<g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
<circle id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" transform="translate(9.01 9.49)" fill="#ff7c81"/>
</g>
<circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
</g>
</g>
</svg>
Here is my attempt at applying the pulse effect:
.map--pulse {
margin: 100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
<defs>
<filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.271"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
<!-- dot here -->
<g class="map__group" id="Group_975" data-name="Group 975">
<g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
<g transform="translate(9.01 9.49)">
<circle class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
</g>
</g>
<circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
</g>
</g>
</svg>
</div>
As you can see, nothing happens.
I then thought maybe the effect needs to take place on a path rather than circle and tried:
<path class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
Instead of:
<circle class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
But all this did was hide my orange circle.
Is a pulse effect possible here?
Maybe so? Using CSS Animation for Map Markers
circle {
fill: gold;
opacity: 0.3;
transform-box: fill-box;
transform-origin: center;
}
svg > circle:last-child {
fill: gold;
opacity: 1;
}
#rp1 {
animation: ripple1 0.7s linear infinite;
}
#keyframes ripple1 {
0% {
transform: scale(2);
opacity: 0.3;
}
100% {
transform: scale(2.5);
opacity: 0.0;
}
}
#rp2 {
animation: ripple2 0.7s linear infinite;
}
#keyframes ripple2 {
0% {
transform: scale(1.5);
}
100% {
transform: scale(2);
}
}
#rp3 {
animation: ripple3 0.7s linear infinite;
}
#keyframes ripple3 {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
#rp4 {
animation: ripple4 0.7s linear infinite;
}
#keyframes ripple4 {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="410" viewBox="0 0 37.013 41.348">
<defs>
<g id="Group_975" >
<circle id="rp1" cx="20" cy="20" r="1" />
<circle id="rp2" cx="20" cy="20" r="1" />
<circle id="rp3" cx="20" cy="20" r="1" />
<circle id="rp4" cx="20" cy="20" r="1" />
</g>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
</g>
<!-- dot here -->
<use xlink:href="#Group_975" x="1" y="3"/>
<circle r="1" cx="21" cy="23" />
</svg>
</div>
Option using a map in *.png format
The map image is added using the <image> tag
This will allow you to place markers on top of the map and link them to certain places on the map. The relative position of markers and places on the map will remain the same regardless of zooming and using any gadget.
.container {
width:100vw;
height:100vh;
}
circle {
fill: gold;
opacity: 1;
transform-box: fill-box;
transform-origin: center;
}
#anim-circle {
fill: crimson;
opacity: 0.3;
animation: ripple1 2s linear infinite;
}
#keyframes ripple1 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0.0;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 2200 1200" >
<image xlink:href="https://i.stack.imgur.com/cosLH.png" width="100%" height="100%" />
<!-- dot here -->
<defs>
<g id="Group_975">
<circle id="anim-circle" cx="250" cy="250" r="15"></circle>
<circle cx="250" cy="250" r="15"></circle>
</g>
</defs>
<use xlink:href="#Group_975" />
<use xlink:href="#Group_975" x="160" y="300" />
<use xlink:href="#Group_975" x="750" y="200" />
<use xlink:href="#Group_975" x="1435" y="650" />
</svg>
</div>
In this example I have two separate SVG element (but it could be just one). In the first I define a <symbol> with a shadow and a circle that is animated. The first SVG takes up no space (width and height are 0). In the second SVG you find the map. I didn't change anything here except the width. By using <use> I can now place the pulsating circle on the map. The nice thing about <use> is that it has it's own viewBox. So, the sizes defined in the symbol will scale according to the size used by the <use> element. Like this: <use href="#pulse" width="4" height="4" x="21" y="27"/> This will place the dot (21,27 from the upper left corner) according to the viewBox viewBox="0 0 37.013 41.348". The two dots I already made are two different sizes -- the size can be adjusted according to the viewBox. The tricky part here is using transform/translate for placing the dot in the right spot. I'm not able to see what all you transform/translate one the <g>'s does. So, here a matter of experimenting. <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow" filterUnits="userSpaceOnUse"> <feDropShadow dx="0" dy="0" stdDeviation="0" flood-color="orange"> <animate attributeName="stdDeviation" values="0;2" dur="2s" repeatCount="indefinite" /> </feDropShadow> </filter> </defs> <symbol id="pulse" viewBox="0 0 4 4"> <circle filter="url(#shadow)" cx="2" cy="2" r="1" fill="orange"/> <circle cx="2" cy="2" r="1" fill="orange"> <animate attributeName="r" values="1;2" dur="2s" repeatCount="indefinite" /> <animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite" /> </circle> </symbol> </svg> <div class="map"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" viewBox="0 0 37.013 41.348"> <g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)"> <g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)"> <g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)"> <g id="Group_964" data-name="Group 964"> <path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/> <path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/> <path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/> </g> <g id="Group_965" data-name="Group 965"> <path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/> <path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/> <path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/> </g> </g> </g> </g> <!-- dot here --> <use href="#pulse" width="4" height="4" x="21" y="27"/> <use href="#pulse" width="2" height="2" x="12" y="15"/> </svg> </div> Update To adjust the the "pulsation" you can play around with the attributes value, keyTimes and dur on the animation element. The value is a list of values that the attribute will have over the span of the duration (dur). It will have two or more values. If there are more than two values (like the animation of r in the below example), the keyTimes attribute can be used for setting the the intermediate pace. So here the value will be 0 at 0 seconds, 1 after 1.5 seconds (0.75), and 0 after 2 seconds (1). <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="300"> <symbol id="pulse" viewBox="0 0 4 4"> <circle cx="2" cy="2" r="1" fill="orange"/> <circle cx="2" cy="2" r="1" fill="orange"> <animate attributeName="r" values="1;2;1" keyTimes="0; 0.75; 1" dur="2s" repeatCount="indefinite" /> <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="2s" repeatCount="indefinite" /> </circle> </symbol> <use href="#pulse" x="0" y="0" width="10" height="10" /> <use href="#pulse" x="0" y="0" width="1.5" height="1.5" /> </svg>
Safari moving part of SVG
I have a compass SVG which I an animating with CSS. It works fine in Chrome and other browsers, but in Safari, the needle in the compass moves left.
But if i refresh the DOM by unchecking and checking one of the needle's css properties, it works fine.
svg {
height: 124px;
}
.rim {
fill: #D291BC;
}
.needle {
transform-origin: 50% 50%;
transform-box: fill-box;
/* offset of 45 degrees, for 90, do 90 - 45 */
transform: rotate( 70deg );
}
<svg viewBox="0 0 155 208" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M9.4,14.6666667 L28.8333333,14.6666667 C29.9379028,14.6666667 30.8333333,15.5620972 30.8333333,16.6666667 L30.8333333,31 C30.8333333,32.1045695 29.9379028,33 28.8333333,33 L9.4,33 C8.2954305,33 7.4,32.1045695 7.4,31 L7.4,16.6666667 C7.4,15.5620972 8.2954305,14.6666667 9.4,14.6666667 Z" id="path-1"></path>
<filter x="-19.2%" y="-24.5%" width="138.4%" height="149.1%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="-6" dy="-9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<rect id="path-3" x="0" y="0" width="37" height="18.3333333" rx="2"></rect>
<filter x="-12.2%" y="-24.5%" width="124.3%" height="149.1%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="-6" dy="-9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.81
0 0 0 0 0.81
0 0 0 0 0.81
0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-5" cx="75.5" cy="76" rx="75.5" ry="76"></ellipse>
<filter x="-9.6%" y="-9.5%" width="119.2%" height="119.1%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="-26" dy="-26" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.19
0 0 0 0 0.52
0 0 0 0 0.737
0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-7" cx="75.9389535" cy="76.4418605" rx="63.6482558" ry="64.0697674"></ellipse>
<filter x="-3.9%" y="-3.9%" width="107.9%" height="107.8%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="-7" dy="-7" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.855521896 0 0 0 0 0.855521896 0 0 0 0 0.855521896 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<path d="M14.7893062,20.7478577 L46.4425703,31.6777537 C47.4866481,32.0382745 48.0407805,33.1769267 47.6802596,34.2210045 C47.4822328,34.7944955 47.0345834,35.2470908 46.463303,35.4514071 L14.7919819,46.778537 C14.3619812,46.9323252 13.8922996,46.9343238 13.4610057,46.7842006 L-18.1923297,35.7664264 C-19.2355111,35.4033198 -19.7868206,34.2632981 -19.4237139,33.2201167 C-19.2242702,32.647128 -18.7755125,32.1956483 -18.2037404,31.9927431 L13.467652,20.7534914 C13.8948358,20.6018964 14.3608456,20.5999099 14.7893062,20.7478577 Z" id="path-9"></path>
<filter x="-5.9%" y="-15.2%" width="111.9%" height="130.5%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="1" dy="8" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.810400723 0 0 0 0 0.200090062 0 0 0 0 0.274595959 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-11" cx="74.8284884" cy="76.8604651" rx="4.82848837" ry="4.86046512"></ellipse>
<filter x="-36.2%" y="-36.0%" width="172.5%" height="172.0%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="-4" dy="-4" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-10-Copy-5" transform="translate(2.000000, 2.000000)" fill-rule="nonzero">
<path d="M76.5,55 C61.3121694,55 49,42.6878306 49,27.5 C49,12.3121694 61.3121694,0 76.5,0 C91.6878306,0 104,12.3121694 104,27.5 C104,42.6878306 91.6878306,55 76.5,55 Z M76.5,48 C87.8218374,48 97,38.8218374 97,27.5 C97,16.1781626 87.8218374,7 76.5,7 C65.1781626,7 56,16.1781626 56,27.5 C56,38.8218374 65.1781626,48 76.5,48 Z" id="Combined-Shape" stroke="#124458" stroke-width="3" fill="#D8D8D8" stroke-linecap="round" stroke-linejoin="round"></path>
<g id="Group-8" transform="translate(57.000000, 28.000000)">
<g id="Group-6">
<g id="Rectangle-9">
<use fill="#E8E8E8" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#124458" stroke-width="3" d="M9.4,16.1666667 C9.12385763,16.1666667 8.9,16.3905243 8.9,16.6666667 L8.9,31 C8.9,31.2761424 9.12385763,31.5 9.4,31.5 L28.8333333,31.5 C29.1094757,31.5 29.3333333,31.2761424 29.3333333,31 L29.3333333,16.6666667 C29.3333333,16.3905243 29.1094757,16.1666667 28.8333333,16.1666667 L9.4,16.1666667 Z" stroke-linejoin="square"></path>
</g>
<g id="Rectangle-9-Copy">
<use fill="#E8E8E8" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<rect stroke="#124458" stroke-width="3" stroke-linejoin="square" x="1.5" y="1.5" width="34" height="15.3333333" rx="2"></rect>
</g>
</g>
<g id="Group-7" transform="translate(6.166667, 1.783784)" stroke="#124458" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1.87781955,0.624324324 L1.87781955,5.61891892" id="Line-3"></path>
<path d="M7.76981857,0.624324324 L7.76981857,5.61891892" id="Line-3-Copy"></path>
<path d="M15.2810968,0.624324324 L15.2810968,5.61891892" id="Line-3-Copy-2"></path>
<path d="M22.792375,0.624324324 L22.792375,5.61891892" id="Line-3-Copy-3"></path>
</g>
<g id="Group-7" transform="translate(6.166667, 12.486486)" stroke="#124458" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1.87781955,0.535135135 L1.87781955,4.81621622" id="Line-3"></path>
<path d="M7.82424812,0.535135135 L7.82424812,4.81621622" id="Line-3-Copy"></path>
<path d="M15.3355263,0.535135135 L15.3355263,4.81621622" id="Line-3-Copy-2"></path>
<path d="M22.8468045,0.535135135 L22.8468045,4.81621622" id="Line-3-Copy-3"></path>
</g>
</g>
<g id="Group-9" transform="translate(0.000000, 52.000000)">
<g id="Group-5">
<g id="Oval-6">
<use xlink:href="#path-5"></use>
<use class="rim" fill-opacity="1" xlink:href="#path-5"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-5"></use>
</g>
<g id="Oval-6">
<use fill="#F6F6F6" xlink:href="#path-7"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-7"></use>
</g>
<ellipse id="Oval" fill="#FFFFFF" transform="translate(54.837645, 47.762128) rotate(-40.000000) translate(-54.837645, -47.762128) " cx="54.8376446" cy="47.7621279" rx="25.4593023" ry="15.4651163"></ellipse>
<ellipse id="Oval-Copy" fill="#FFFFFF" transform="translate(37.311047, 86.263018) rotate(-40.000000) translate(-37.311047, -86.263018) " cx="37.3110465" cy="86.2630178" rx="11.7827655" ry="12.6739538"></ellipse>
<path d="M74.622093,20.1649049 L74.622093,13.4164905 M103.661734,27.6663352 L107.035941,21.8220369 M123.496456,47.640592 L129.340754,44.2663848 M130.94556,76.8837209 L137.693975,76.8837209 M123.496456,104.359408 L129.340754,107.733615 M103.661734,125.217386 L107.035941,131.061684 M74.622093,132.718816 L74.622093,139.46723 M47.3382664,125.217386 L43.9640592,131.061684 M27.5035445,104.359408 L21.6592462,107.733615 M20.0544397,76.8837209 L13.3060254,76.8837209 M27.5035445,47.640592 L21.6592462,44.2663848 M47.3382664,27.6663352 L43.9640592,21.8220369" id="Line-2" stroke="#124458" stroke-width="3" stroke-linecap="round"></path>
</g>
<g class="needle" :style="style">
<g id="Group-8-Copy" transform="translate(75.000000, 76.500000) rotate(44.000000) translate(-75.000000, -76.500000) translate(61.000000, 42.000000)">
<g id="Rectangle-9-Copy" transform="translate(14.127461, 33.766841) rotate(90.000000) translate(-14.127461, -33.766841) ">
<use fill="#FF5963" xlink:href="#path-9"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<path stroke="#124458" stroke-width="3" d="M14.2997206,22.1657103 C14.1926055,22.1287234 14.076103,22.12922 13.9693071,22.1671187 L-17.7020853,33.4063704 C-17.8450284,33.4570967 -17.9572178,33.5699666 -18.0070787,33.7132138 C-18.0978554,33.9740092 -17.960028,34.2590146 -17.6992327,34.3497912 L13.9541027,45.3675654 C14.0619262,45.4050962 14.1793466,45.4045965 14.2868468,45.3661495 L45.9581679,34.0390196 C46.100988,33.9879405 46.2129003,33.8747917 46.262407,33.731419 C46.3525373,33.4703995 46.2140042,33.1857365 45.9529847,33.0956062 L14.2997206,22.1657103 Z" stroke-linejoin="square"></path>
</g>
<path d="M-0.526379321,40.5375395 C-0.578879271,40.5194112 -0.634032823,40.510157 -0.68957451,40.510157 C-0.965716885,40.510157 -1.18957451,40.7340147 -1.18957451,41.010157 L-1.18957451,61.8611801 C-1.18957451,61.9185663 -1.17969553,61.9755241 -1.16037035,62.0295585 C-1.06737754,62.2895718 -0.781209497,62.4249688 -0.521196134,62.3319759 L29.1411004,51.7233662 C29.2839205,51.6722871 29.3958328,51.5591383 29.4453395,51.4157656 C29.5354698,51.1547461 29.3969367,50.8700831 29.1359172,50.7799529 L-0.526379321,40.5375395 Z" id="Rectangle-9-Copy" stroke="#124458" stroke-width="3" fill="#124458" transform="translate(14.141846, 51.435941) rotate(90.000000) translate(-14.141846, -51.435941) "></path>
</g>
</g>
<g id="Oval-6" stroke-linecap="round" stroke-linejoin="round">
<use fill="#E8E8E8" xlink:href="#path-11"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-11"></use>
</g>
</g>
</g>
</g>
</svg>
I read that transform-box: fill-box; should have fixed it on safari but didnt. I am setting the origin to transform-origin: 50% 50%; But Safari doesn't listen to that until the DOM refreshes.
jsfiddle
Side note I know the needle is off by 45 degrees but thats fine. I just have to minus 45 from whatever degree im trying to show
It seems transform-box: fill-box; is bugged on safari when trying to transform it too. As a temporary but not that bad fix, I just used pixel amounts transform-origin: 75px 75px;