在SVG中显示CSS图像精灵,而不使用外来对象
Display CSS image sprite in SVG without using foreignObject
如这个小提琴所示,可以使用foreignObject
元素在SVG中渲染CSS精灵。
但是,IE不支持此功能,因此我想知道是否有其他方法可以做到这一点。
我怀疑答案可能是否定的,因为我发现了两个未解决的问题(1,2)
我正在使用 d3.js所以任何详细说明 d3 方法的答案都将是一个奖励。
如有必要,您可以使用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>
相关文章:
- 如何使用javascript从主svg对象动态创建svg视图框
- 保存嵌入对象中的svg
- 在SVG中创建带有外来对象的文本区域的Javascript不起作用
- 是否可以在不创建svg对象的情况下创建捕捉元素?[snap.svg]
- 捕捉.svg — 单击其中一个元素时删除对象
- 在 <对象> 标记中加载 SVG 时,将侦听器添加到 SVG 卸载事件
- SVG 对象部分上的 JQuery click() 不一致
- SVG DOM对象间距/重叠
- 在呈现 D3 SVG 对象之前更改引导按钮文本
- 对象中的SVG与JS中的点击事件有关
- 使用<对象>用于SVG和HTML中的内联css以编辑填充
- 改变<svg>对象's路径
- 缩放SVG图像以适应父对象,并在不同的实例中更改仪表颜色
- 编写嵌入为对象的SVG脚本
- Svg与Canvas以及圆形对象的渲染时间
- 以文本形式检索对象元素中的SVG Dom
- 在Internet Explorer中使用JS访问对象内部的SVG
- AngularJS:如何将ng-click绑定到使用嵌入或对象元素插入的SVG图像
- 如何获取上传的SVG文件对象的内容
- 选择选项并更改适当的对象svg