SVG <use>がFirefoxとIEで異常に動作する

Question

<svg><use xlink:href="id-of-symbol" /></svg>を含むようにしようとすると、一部のSVGが異常に動作することに気付きました。しかし、SVGを直接注入するか、<img>で参照すると、SVGが正しく見えます。

私はCodePenの例を作成しました：http://codepen.io/andeersg/full/qRWMQv/。 Chromeでは3つのバージョンすべてが同じように見えますが、FireFoxとIE11では中間のものが壊れています（使用バージョン）。

SVGに何か問題があったのですか？これは既知のバグですか？

Answer 1

mask、clipPathおよびfilter要素（基本的にurl（）参照でアクセスする必要のあるレンダリングされていないもの）は、Firefoxのシンボル要素内にある場合は機能しません。これは既知のバグです。

これらの要素をシンボル要素の外に移動するのは簡単な回避策です。

<svg width="0" height="0" style="position:absolute"> 
 
    <mask id="ata" fill="#fff"><path d="M0 4.11c0 2.27 1.838 4.11 4.103 4.11a4.107 4.107 0 0 0 4.104-4.11C8.207 1.84 6.37 0 4.103 0A4.107 4.107 0 0 0 0 4.11z"></path></mask> 
 
    <mask id="atb" fill="#fff"><path d="M0 5.17c0 2.348 1.9 4.25 4.242 4.25a4.245 4.245 0 0 0 4.243-4.25c0-2.346-1.9-4.248-4.243-4.248A4.246 4.246 0 0 0 0 5.17z"></path></mask> 
 
    <symbol viewBox="0 0 65 72" id="helseogfamilie"><title>Page 1</title><g transform="translate(1)" fill="none" fill-rule="evenodd"><g transform="translate(1.06 4.242)" stroke="#4A5A28" stroke-width="3"><path d="M37.736.928V28.19c0 10.34-8.447 18.802-18.772 18.802S.19 38.531.19 28.19V.928"></path><path d="M55.824 26.98v19.743c0 10.34-8.447 18.801-18.772 18.801s-18.773-8.46-18.773-18.801"></path></g><g transform="translate(0 1.06)"><path fill="#4A5A28" mask="url(#ata)" d="M-5.303 13.523H13.51V-5.303H-5.303z"></path></g><g transform="translate(31.818)"><path fill="#4A5A28" mask="url(#atb)" d="M-5.303 14.722h19.09V-4.38h-19.09z"></path></g><path d="M62.465 25.635a5.584 5.584 0 0 1-5.579 5.588 5.584 5.584 0 0 1-5.58-5.588 5.584 5.584 0 0 1 5.58-5.589 5.584 5.584 0 0 1 5.579 5.589z" stroke="#4A5A28" stroke-width="2"></path></g></symbol> 
 
</svg> 
 

 
<svg width="65px" height="72px" viewBox="0 0 65 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch --> 
 
    <title>Page 1</title> 
 
    <desc>Created with Sketch.</desc> 
 
    <defs> 
 
     <path d="M0,4.10984848 C0,6.37954545 1.8380303,8.21969697 4.10348485,8.21969697 C6.37,8.21969697 8.2069697,6.37954545 8.2069697,4.10984848 C8.2069697,1.84015152 6.37,0 4.10348485,0 C1.8380303,0 0,1.84015152 0,4.10984848 L0,4.10984848 Z" id="helseogfamilie-path-1"></path> 
 
     <path d="M0,5.17045455 C0,7.51757576 1.89954545,9.41924242 4.24242424,9.41924242 C6.58530303,9.41924242 8.48484848,7.51757576 8.48484848,5.17045455 C8.48484848,2.82439394 6.58530303,0.921666667 4.24242424,0.921666667 C1.89954545,0.921666667 0,2.82439394 0,5.17045455 L0,5.17045455 Z" id="helseogfamilie-path-3"></path> 
 
    </defs> 
 
    <g id="Forside" stroke="none" fill="none" fill-rule="evenodd"> 
 
     <g transform="translate(-988.000000, -623.000000)" id="Page-1"> 
 
      <g transform="translate(989.000000, 623.000000)"> 
 
       <g id="Group-5" transform="translate(1.060606, 4.242424)" stroke="#4A5A28" stroke-width="3"> 
 
        <path d="M37.7363636,0.928136364 L37.7363636,28.1899545 C37.7363636,38.5308636 29.2886364,46.9923788 18.9636364,46.9923788 C8.63863636,46.9923788 0.190909091,38.5308636 0.190909091,28.1899545 L0.190909091,0.928136364" id="helseogfamilie-Stroke-1"></path> 
 
        <path d="M55.8244697,26.9805455 L55.8244697,46.7226667 C55.8244697,57.0635758 47.3767424,65.5240303 37.0517424,65.5240303 C26.7267424,65.5240303 18.2790152,57.0635758 18.2790152,46.7226667" id="helseogfamilie-Stroke-3"></path> 
 
       </g> 
 
       <g id="Group-8" transform="translate(0.000000, 1.060606)"> 
 
        <mask id="helseogfamilie-mask-2" fill="white"> 
 
         <use xlink:href="#helseogfamilie-path-1"></use> 
 
        </mask> 
 
        <g id="Clip-7"></g> 
 
        <polygon id="Fill-6" fill="#4A5A28" mask="url(#helseogfamilie-mask-2)" points="-5.3030303 13.5227273 13.51 13.5227273 13.51 -5.3030303 -5.3030303 -5.3030303"></polygon> 
 
       </g> 
 
       <g id="Group-11" transform="translate(31.818182, 0.000000)"> 
 
        <mask id="mask-4" fill="white"> 
 
         <use xlink:href="#helseogfamilie-path-3"></use> 
 
        </mask> 
 
        <g id="Clip-10"></g> 
 
        <polygon id="Fill-9" fill="#4A5A28" mask="url(#mask-4)" points="-5.3030303 14.7222727 13.7878788 14.7222727 13.7878788 -4.38136364 -5.3030303 -4.38136364"></polygon> 
 
       </g> 
 
       <path d="M62.4649242,25.6347424 C62.4649242,28.7211061 59.967197,31.2230758 56.8861364,31.2230758 C53.8029545,31.2230758 51.3052273,28.7211061 51.3052273,25.6347424 C51.3052273,22.5483788 53.8029545,20.0464091 56.8861364,20.0464091 C59.967197,20.0464091 62.4649242,22.5483788 62.4649242,25.6347424 L62.4649242,25.6347424 Z" id="helseogfamilie-Stroke-12" stroke="#4A5A28" stroke-width="2"></path> 
 
      </g> 
 
     </g> 
 
    </g> 
 
</svg> 
 

 
<svg width="65" height="72"><use xlink:href="#helseogfamilie" /></svg> 
 

 
<img src="https://beta.mgk.no/themes/custom/mgk/dev/svg/helseogfamilie.svg">