Question

我注意到当我尝试将<svg><use xlink:href="id-of-symbol" /></svg>包含在内时，某些SVG表现得很奇怪。但是如果直接注入SVG或通过<img>引用它们，它们看起来是正确的。

我在CodePen上创建了一个示例：http://codepen.io/andeersg/full/qRWMQv/。在Chrome中，所有三个版本看起来都相同，而在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">

SVG <use>在Firefox和IE中表现得很奇怪

1 个答案: