Question

如此fiddle所示，可以使用foreignObject元素在SVG中渲染CSS精灵。

然而，这在IE中不受支持，所以我想知道是否还有其他方法可以做到。

我怀疑答案可能不是，因为我发现了两个未解决的问题（1，2）

我正在使用d3.js所以任何解释d3方式的答案都是奖励。

Answer 1

如有必要，您可以使用clipPath选择图像的某些部分。像这样扩展你的jsfiddle，看看我的意思......

<div class='source youtube'></div>
<svg width="100%" height="100%">
    <foreignObject height=50 width=50>
        <div class='source facebook'></div>
    </foreignObject>
    <defs>
        <clipPath id="c">
            <rect y="10" width="7" height="10"/>
        </clipPath>
        <clipPath id="c2">
            <rect x="7" y="12" width="7" height="10"/>
        </clipPath>
    </defs>
    <image transform="scale(4.5)" y="-5" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c)"/>
    <g transform="translate(-30, 0)">
    <image transform="scale(4.5)" x="0" y="0" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c2)"/>
    </g>
<svg>

在不使用foreignObject的情况下在SVG中显示CSS图像精灵

1 个答案: