search

jsdevkr / gitCodeShare.com

Contributhon 2018 - gitCodeShare.com (a.k.a gitShare)
https://gitcodeshare.com
MIT License
76 stars 21 forks source link

[Question] Is this svg animation usage valid? #111

Closed currybob closed 6 years ago

currybob commented 6 years ago 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200" height="600" viewBox="0 0 1200 600">
    <style type="text/css">
      path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 10s linear infinite;
      }

      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
    </style>
    <defs>
        <path id="a" d="M0 0h1200v600H0z"/>
        <path id="c" d="M.292.094h362.64v115.889H.293z"/>
    </defs>
    <g fill="none" fill-rule="evenodd" opacity=".4">
        <g>
            <mask id="b" fill="#fff">
                <use xlink:href="#a"/>
            </mask>
            <path fill="transparent" stroke="#5147ff" stroke-width="7" d="M1288.53 583.89c-29.231 29.22-68.095 45.311-109.432 45.311-41.338 0-80.202-16.091-109.433-45.31-26.913-26.904-42.682-61.973-45.014-99.617h103.646v-8.08h-103.939c-.006-.565-.02-1.128-.02-1.693 0-41.323 16.097-80.172 45.327-109.391 29.231-29.22 68.095-45.311 109.433-45.311 41.338 0 80.2 16.091 109.432 45.31 29.23 29.22 45.327 68.069 45.327 109.392 0 41.322-16.097 80.17-45.327 109.39zM154.96 205.234v-98.085c23.343-.565 45.858-6.023 66.375-15.872v129.13H155.38a277.22 277.22 0 0 1-.42-15.173zM41.487 53.806C12.257 24.586-3.841-14.263-3.841-55.584c0-41.323 16.098-80.172 45.328-109.391 29.23-29.22 68.094-45.311 109.432-45.311 41.337 0 80.201 16.092 109.432 45.31 29.23 29.22 45.328 68.07 45.328 109.391 0 41.322-16.098 80.171-45.328 109.39a155.697 155.697 0 0 1-30.932 23.996V-23.58h-8.084V82.25c-21.534 11.023-45.525 16.866-70.416 16.866-41.339 0-80.202-16.092-109.432-45.311zm114.454 174.68h112.424c13.325 0 24.166 10.836 24.166 24.156v39.737H75.677v-39.737c0-13.32 10.84-24.156 24.166-24.156h56.098zm136.59 357.616c0 13.32-10.841 24.157-24.166 24.157H99.843c-13.326 0-24.166-10.837-24.166-24.157v-28.554H292.53v28.554zm0-89.121v52.487H75.677V300.46H292.53V496.981zm138.043 16.616a331.968 331.968 0 0 0 7.33 15.926c-6.472-4.64-13.457-8.361-20.985-11.198-19.755-7.443-39.262-7.228-54.94-7.057-6.063.067-11.299.124-15.754-.257-22.442-1.923-40.35-13.051-45.61-16.643v-39.77a280.859 280.859 0 0 0 16.75 7.746c32.508 13.744 66.925 21.085 102.396 21.858 2.977 9.7 6.581 19.517 10.813 29.395zm-18.68-63.16c1.307 8.402 3.153 16.957 5.509 25.618-33.55-1.038-66.104-8.137-96.888-21.153a272.668 272.668 0 0 1-19.9-9.38v-43.715c18.18 18.38 43.4 29.786 71.239 29.786a99.72 99.72 0 0 0 37.688-7.358c.192 8.557.967 17.297 2.352 26.201zm23.501-52.386a92.703 92.703 0 0 1-21.754 15.433 92.704 92.704 0 0 1-4.087 1.961c-11.513 5.181-24.276 8.068-37.7 8.068-28.672 0-54.326-13.16-71.24-33.751V273.034c16.914-20.591 42.568-33.751 71.24-33.751 50.81 0 92.15 41.322 92.15 92.115 0 23.282-8.691 44.57-22.993 60.805a91.918 91.918 0 0 1-2.741 2.982 91.845 91.845 0 0 1-2.875 2.866zm83.942 87.33a416.29 416.29 0 0 0-2.137 11.948c-.869-4.59-1.889-8.936-3.034-13.055h5.393c-.074.37-.15.733-.222 1.106zm-50.45-302.78h312.484c-9.687 12.89-15.434 28.899-15.434 46.225a76.684 76.684 0 0 0 5.401 28.35h-180.68c-12.91 0-23.414 10.5-23.414 23.406v106.574c-11.084 7.687-20.739 19.944-28.785 36.585-6.918 14.307-12.696 31.92-17.219 52.452h-9.573c-11.785-34.464-32.54-51.176-45.04-61.24-2.913-2.346-5.43-4.372-7.162-6.09-3.734-3.701-8.014-7.611-12.33-11.392 15.524-17.65 24.952-40.78 24.952-66.073 0-53.894-42.79-97.978-96.191-100.107V121.147c15.434 36.096 51.304 61.455 92.991 61.455zm374.188-22.804c16.053 0 30.845 5.504 42.586 14.724a69.72 69.72 0 0 1 8.655 8.08c11.066 12.247 17.814 28.462 17.814 46.225a68.611 68.611 0 0 1-6.095 28.35h-58.918v-61.708h-8.084v61.708h-58.917a68.603 68.603 0 0 1-6.096-28.35c0-17.763 6.748-33.978 17.814-46.224a69.653 69.653 0 0 1 8.656-8.08c11.74-9.22 26.531-14.725 42.585-14.725zm146.328 404.456c0 4.446-3.619 8.063-8.066 8.063H555.037c-4.448 0-8.066-3.617-8.066-8.063 0-4.446 3.618-8.063 8.065-8.063h426.301c4.447 0 8.066 3.617 8.066 8.063zm-25.676-79.98v42.646c0 8.45-6.878 15.325-15.332 15.325H590.66c-8.454 0-15.332-6.875-15.332-15.325V280.582c0-8.451 6.878-15.326 15.332-15.326H948.396c8.453 0 15.33 6.875 15.33 15.326v203.691zm48.095-305.711l-16.514 28.594a91.716 91.716 0 0 1-4.552-28.594 91.71 91.71 0 0 1 4.552-28.594l16.514 28.594zm142.168 0l16.515-28.594a91.71 91.71 0 0 1 4.55 28.594 91.716 91.716 0 0 1-4.55 28.594l-16.515-28.594zm-88.484 76.537l17.4-30.126 17.4 30.126-8.762 15.17a92.71 92.71 0 0 1-8.638.408c-2.913 0-5.794-.143-8.638-.409l-8.762-15.169zm-.072-76.537l17.472-30.251 17.472 30.25-17.472 30.251-17.472-30.25zm8.681-91.694a92.804 92.804 0 0 1 8.79-.421c2.966 0 5.897.146 8.792.421l8.681 15.031-17.472 30.25-17.472-30.25 8.681-15.03zm-67.075 143.916l-7.464-12.925c-.169-.355-.336-.71-.5-1.068l19.746-34.19h39.611l19.806 34.292-19.66 34.04h-32.619a92.894 92.894 0 0 1-18.92-20.149zm31.482 28.48h20.056l5.47 9.47a91.524 91.524 0 0 1-25.526-9.47zm63.243 9.47l5.468-9.47h20.057a91.52 91.52 0 0 1-25.525 9.47zm64.472-50.875l-7.466 12.925a92.904 92.904 0 0 1-18.919 20.15h-32.619l-19.66-34.041 19.806-34.291h39.61l19.747 34.19c-.163.357-.331.712-.5 1.067zm-20.533-106.644a92.58 92.58 0 0 1 6.412 6.6 92.73 92.73 0 0 1 6.655 8.524l7.466 12.925c.168.355.336.71.499 1.068l-19.747 34.19h-39.61l-19.806-34.292 19.806-34.29H1139.53a92.916 92.916 0 0 1 6.174 5.275zm-20.817-14.641c.809.415 1.608.846 2.403 1.285h-19.911l-5.449-9.433a91.788 91.788 0 0 1 22.957 8.148zm-74.51-4.194a91.173 91.173 0 0 1 12.424-3.719c.36-.08.72-.16 1.081-.236l-5.449 9.434h-19.91a91.766 91.766 0 0 1 11.853-5.48zm-50.8 46.884l7.463-12.925a92.596 92.596 0 0 1 3.252-4.426 93.026 93.026 0 0 1 3.62-4.341 92.961 92.961 0 0 1 3.69-3.937 92.825 92.825 0 0 1 8.68-7.696h32.151l19.806 34.291-19.806 34.291h-39.61l-19.747-34.19c.164-.356.331-.712.5-1.067zm81.202-85.785c1.185-2.96 2.28-5.864 3.29-8.69a68.878 68.878 0 0 0 4.503 13.432c4.007 8.854 9.47 16.112 15.032 22.299a100.275 100.275 0 0 0-20.698-2.154c-4.93 0-9.777.364-14.518 1.055 4.554-8.053 8.699-16.724 12.39-25.942zm213.466 305.917c-30.757-30.746-71.65-47.678-115.147-47.678s-84.391 16.932-115.148 47.678c-30.758 30.745-47.696 71.624-47.696 115.105 0 .565.015 1.128.02 1.692H971.81V280.582c0-12.907-10.504-23.406-23.415-23.406h-33.583a76.685 76.685 0 0 0 5.402-28.35c0-17.326-5.747-33.335-15.435-46.224h77.982c2.13 53.381 46.23 96.155 100.145 96.155 55.268 0 100.233-44.947 100.233-100.195 0-27.09-10.815-51.698-28.35-69.75a139.263 139.263 0 0 0 3.609-19.505c1.784-15.922.768-31.857-3.018-47.362-4.723-19.338-13.786-38.032-26.94-55.562l-3.233 2.424-3.233 2.424c12.441 16.583 21.02 34.213 25.497 52.402 3.578 14.536 4.565 29.48 2.933 44.417a129.747 129.747 0 0 1-2.4 14.39 100.37 100.37 0 0 0-28.443-17.136c-13.702-13.399-31.55-30.94-28.789-62.303 3.17-12.214 4.292-20.32 4.368-20.882l-7.857-1.765c-2.346 7.372-3.848 14.42-4.506 21.187-2.156 8.244-5.252 18.347-9.578 29.12-4.768 11.876-10.03 22.1-15.51 30.919-15.36 3.993-29.295 11.548-40.874 21.721-.213-3.547-.354-7.064-.367-10.267-.01-2.182-.286-4.742-.605-7.707-1.004-9.313-2.521-23.387 3.085-40.502 5.056-15.441 15.083-30.707 29.896-45.56 10.132-8.513 16.56-14.776 17.029-15.234l-5.365-6.032c-6.395 5.155-12.048 10.23-17.041 15.207-7.897 6.63-18.038 14.623-29.213 22.16-21.711 14.646-51.524 30.337-73.777 25.024 1.83-4.33 4.747-12.177 8.482-25.364 2.259-7.98 10.62-21.543 21.3-34.556 12.548-15.287 26.127-27.405 38.238-34.123 9.73-5.397 18.104-7.137 24.888-5.174l1.124-3.881 1.125-3.88c-8.931-2.585-19.379-.608-31.06 5.87-28.817 15.985-58.323 55.635-63.394 73.544-6.064 21.416-9.777 27.934-9.799 27.972l-2.48 4.134 4.505 1.72c20.73 7.912 49.453-.36 85.37-24.588 1.023-.69 2.036-1.382 3.039-2.077-17.997 29.029-15.449 52.665-13.99 66.205.297 2.743.551 5.111.559 6.876.023 5.51.396 11.796.869 17.634-15.625 16.937-25.492 39.254-26.472 63.82h-84.976c-13.983-14.076-33.345-22.805-54.71-22.805-21.365 0-40.727 8.729-54.71 22.804H468.887c-51.276 0-92.991-41.7-92.991-92.956V-2.442h-8.084v233.733c-26.232 1.045-49.902 12.212-67.197 29.698v-8.347c0-17.776-14.468-32.237-32.25-32.237h-38.946V87.107c13.286-7.328 25.62-16.565 36.648-27.588 30.757-30.745 47.695-71.623 47.695-115.104 0-43.48-16.938-84.359-47.695-115.104-30.757-30.746-71.651-47.678-115.148-47.678-43.498 0-84.391 16.932-115.148 47.678C5.014-139.944-11.925-99.065-11.925-55.585c0 43.48 16.939 84.359 47.696 115.104 29.802 29.792 69.123 46.613 111.106 47.629v98.085c0 5.078.139 10.136.407 15.172H99.843c-17.782 0-32.25 14.461-32.25 32.237v333.46c0 17.776 14.468 32.237 32.25 32.237h168.522c17.782 0 32.25-14.461 32.25-32.237v-68.313c4.688 9.79 11.776 22.195 22.1 35.119 13.32 16.674 29.29 30.725 47.463 41.761 22.678 13.773 48.849 22.852 77.786 26.984l.571-4 .572-4c-27.763-3.964-52.838-12.633-74.53-25.767-17.34-10.499-32.588-23.869-45.319-39.738-13.12-16.353-20.857-32.071-24.948-42.026 9.16 5.052 23.81 11.448 41.224 12.94 4.844.415 10.524.353 16.534.286 15-.162 33.667-.37 52 6.539 13.811 5.203 25.663 13.737 35.81 25.846 8.57 14.58 15.192 23.327 15.651 23.93l6.805-4.306c-4.746-9.173-9.983-17.234-15.754-24.226-5.778-9.862-12.434-22.38-18.575-36.715-3.763-8.785-7.015-17.512-9.755-26.142a260.364 260.364 0 0 1-2.426-8.082c-2.579-9.144-4.568-18.161-5.943-26.998-1.52-9.771-2.29-19.332-2.315-28.643a100.73 100.73 0 0 0 23.984-17.22c4.306 3.763 8.562 7.641 12.223 11.27 2.029 2.012 4.696 4.16 7.784 6.645 9.886 7.96 24.825 19.989 35.887 41.812 2.114 4.17 3.992 8.558 5.66 13.135.958 2.628 1.844 5.32 2.655 8.08 4.464 15.187 6.715 32.352 6.713 51.399-1.538 17.885-1.694 30.011-1.696 30.227l8.06.473c1.171-10.922 1.714-21.056 1.726-30.476 1.202-13.84 3.244-31.132 6.71-48.976a355.434 355.434 0 0 1 2.253-10.727c6.618-29.244 18.092-61.849 37.719-78.818V526.92c0 9.359 5.525 17.449 13.485 21.19h-25.693c-8.904 0-16.149 7.242-16.149 16.144 0 8.901 7.245 16.144 16.15 16.144h28.438l.05.088 1.95 3.539a35.779 35.779 0 0 0 5.353-3.627h390.509c8.904 0 16.15-7.243 16.15-16.144 0-8.902-7.246-16.143-16.15-16.143h-23.012c7.96-3.742 13.485-11.832 13.485-21.191v-42.645h44.742c2.343 39.804 18.957 76.9 47.398 105.33 30.757 30.746 71.65 47.678 115.148 47.678 43.496 0 84.39-16.932 115.147-47.678 30.758-30.745 47.696-71.623 47.696-115.103 0-43.481-16.938-84.36-47.696-115.105z" mask="url(#b)"/>
        </g>
        <path fill="transparent" stroke="#5147ff" stroke-width="7" d="M930.909 301.08V507.92H608.09V301.08H930.91zM879.48 293H600v223h339V293H879.481zM184.5 252.164c4.045 0 7.336 3.29 7.336 7.336 0 4.045-3.291 7.336-7.336 7.336s-7.336-3.29-7.336-7.336c0-4.045 3.291-7.336 7.336-7.336m0 22.836c8.547 0 15.5-6.953 15.5-15.5s-6.953-15.5-15.5-15.5-15.5 6.953-15.5 15.5 6.953 15.5 15.5 15.5"/>
        <g transform="translate(463)">
            <mask id="d" fill="#fff">
                <use xlink:href="#c"/>
            </mask>
            <path fill="transparent" stroke="#5147ff" stroke-width="7" d="M117.26 79.213l-.223.212 1.461 1.855.785.995 4.49 5.699v11.47c0 4.657-3.787 8.446-8.443 8.446H34.234l-16.28-20.66h73.36c7.848 0 14.235-6.389 14.235-14.24V2.453l10.277 10.38V72.99c0 2.231.517 4.343 1.435 6.224zm115.535 0l-.224.212 1.463 1.857.78.99 4.493 5.702v11.47c0 4.657-3.787 8.446-8.443 8.446h-81.095l-16.28-20.66h73.358c7.85 0 14.235-6.389 14.235-14.24V2.452l10.278 10.381V72.99c0 2.231.517 4.343 1.435 6.224zm122.047 20.23c0 4.658-3.788 8.447-8.444 8.447h-81.095l-16.281-20.66h73.359c7.85 0 14.236-6.389 14.236-14.24V2.452l18.225 18.408v78.583zM239.451-3.817a6.153 6.153 0 0 1 6.145-6.147h76.785c1.286 0 2.48.398 3.468 1.077a6.17 6.17 0 0 1 2.677 5.07V72.99a6.153 6.153 0 0 1-6.145 6.146H245.596c-.298 0-.59-.028-.876-.07a6.13 6.13 0 0 1-3.739-2.031 6.116 6.116 0 0 1-1.53-4.046V-3.818zm-115.534 0a6.153 6.153 0 0 1 6.145-6.147h76.785c1.286 0 2.48.398 3.467 1.077a6.142 6.142 0 0 1 2.678 5.07V72.99a6.153 6.153 0 0 1-6.145 6.146H130.062c-.298 0-.59-.028-.876-.07-2.974-.427-5.269-2.986-5.269-6.077V-3.818zm-115.534 0a6.153 6.153 0 0 1 6.144-6.147h76.786c1.286 0 2.48.398 3.467 1.077a6.142 6.142 0 0 1 2.678 5.07v76.807a6.153 6.153 0 0 1-6.145 6.147H14.527c-.298 0-.589-.028-.876-.07-2.973-.427-5.268-2.986-5.268-6.077V-3.818zm-6.88 83.243l1.463 1.857.78.99 26.564 33.71h85.02c9.117 0 16.534-7.419 16.534-16.538V98.24l13.98 17.742h85.02c9.117 0 16.534-7.42 16.534-16.54v-1.202l13.98 17.742h85.02c9.117 0 16.535-7.42 16.535-16.54V17.533L334.64-11.043c-2.48-4.195-7.045-7.015-12.26-7.015h-76.784c-7.85 0-14.236 6.388-14.236 14.24v5.151l-12.252-12.375c-2.48-4.195-7.046-7.016-12.26-7.016h-76.786c-7.85 0-14.236 6.388-14.236 14.24v5.151l-12.252-12.375c-2.48-4.195-7.046-7.016-12.26-7.016H14.526C6.677-18.058.292-11.67.292-3.818v76.807c0 2.231.517 4.343 1.435 6.224l-.224.212z" mask="url(#d)"/>
        </g>
        <path fill="transparent" stroke="#5147ff" stroke-width="7" d="M368 364h8v-67h-8zM632 47V23h-8v24h2.05zM517 47V23h-8v24h1.932zM747 47V23h-8v24h2.678z"/>
    </g>
</svg>

I created animations based on background svg file It seems that be cached when it is first loaded and then refreshed. Now, this static svg file is loaded with img tag.

Question

  1. Is animation code appropriate ?
  2. Is there any good way to prevent caching ?
thomasJang commented 6 years ago

I make some sample https://codesandbox.io/s/rwon1941rq I don't find any problem.