svg files
を使用してアイコンとして表示しようとしています。私はいくつかの問題 svgアイコンを適切にレンダリングしてアニメーション化するにはどうすればよいですか?
- を抱えているしかし、私は
svg
タグ内icon.svg
ファイルをロードできませんでした。私は代わりにobject
タグを使用して終了しました。 svg
にアニメーションを追加したいと思います。私は、ブラウザSVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
ヒスイ/ htmlの中でこのすべてを行うための最善の方法は何でこのエラーがスローされますように
<animate dur="5s" values=...; ></animate>
としてicon.svg
ファイルの中にそれをやってしまいましたか?これは# footer.tpl.jade footer.footer +nav .logo.logo--footer h3.logo__title.logo__title--footer a.logo__link(href='/') Frit br/ a.logo__link(href='/') Mark p.footer__content All rights reserved or whatever. Please refer to the about section & terms-of-service for the appropriate info. All rights reserved. object.icon--heart(type='image/svg+xml', data='icons/heart-icon.svg') | Copyright © 2016 Belgium. #_icons.scss .icon { &--heart { width: 25px; height: 20px; // Will like to add all the animation here } }
心-icon.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path class="heart--pulse" id="Heart-Icon" d="M18,11.316c3.368,-5.316 10.105,-5.316 13.474,-2.658c3.368,2.658 3.368,7.974 0,13.29c-2.358,3.986 -8.421,7.973 -13.474,10.631c-5.053,-2.658 -11.116,-6.645 -13.474,-10.631c-3.368,-5.316 -3.368,-10.632 0,-13.29c3.369,-2.658 10.106,-2.658 13.474,2.658Z" style="fill:hsla(60, 100%, 75.1%, 1);">
<animate dur="5s" values="hsla(0, 100%, 75.1%, 1); hsla(60, 100%, 75.1%, 1); hsla(0, 100%, 75.1%, 1)" attributeName="fill" repeatCount="indefinite"></animate>
</path><g id="Remove-Icon"><clipPath id="_clip1"><polygon points="140.007,3.906 172.007,3.92 171.993,34.007 139.993,33.993 140.007,3.906 "/></clipPath><g clip-path="url(#_clip1)"></g></g></svg>
それは意志2.を無視:私はリファレンスとしてこれを使用しましたSMILの廃止予定が廃止されたため、Chromeの今後のリリースでは廃止される予定です。 –
@Robert Longsonありがとうございました。 – intercoder