在SVG中显示CSS图像精灵而不使用foreignObject [英] Display CSS image sprite in SVG without using foreignObject

问题描述

如本小提琴中所示，可以使用<$ c在SVG中呈现CSS sprite $ c> foreignObject 元素。

As shown in this fiddle it's possible to render a CSS sprite in SVG using the foreignObject element.

但是这不是在IE支持，所以我想知道是否有另一种方法。

However this isn't supported in IE, so I was wondering if there was another way to do it.

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

I suspect the answer may be no, because I found two unresolved questions on this (1,2)

我使用d3.js，所以任何答案

I'm using d3.js so any answer that spells out the d3 way to do this would be a bonus.

推荐答案

您可以使用clipPath选取图像的一部分if必要。扩展你的jsfiddle像这样看看我的意思...

You could pick out parts of an image using a clipPath if necessary. Extend your jsfiddle like this to see what I mean...

<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>    

这篇关于在SVG中显示CSS图像精灵而不使用foreignObject的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！