在 SVG 中显示 CSS 图像精灵而不使用 foreignObject答案

【问题标题】：Display CSS image sprite in SVG without using foreignObject在 SVG 中显示 CSS 图像精灵而不使用 foreignObject
【发布时间】：2013-10-01 05:43:38
【问题描述】：

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

但是 IE 不支持此功能，所以我想知道是否有其他方法可以做到这一点。

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

我正在使用 d3.js，所以任何能说明 d3 方法的答案都将是一个奖励。

【问题讨论】：

标签： javascript css svg d3.js

【解决方案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>

【讨论】：