使用 SVG 图像的最佳实践? [英] Best practice for using SVG images?
问题描述
我的研究提出了几种在 html 页面中插入 SVG 图像的方法.使用 是最简单的一种，但缺乏为图标着色的能力，这是我的主要需求.所以，我已经阅读了有关使用 的内容，但这仍然不允许我使用 css fill 命令对其进行样式设置.放置大量 数据也是不可接受的，因为我想将图像用作参考图像.
My research came up with a several ways to insert SVG images inside an html page.
Using <img> is the most simple one but lack of ability as coloring the icons, which is my main need. So, I've read about using <object> but this still doesn't let me styling it using css fill command.
Putting the bulk of <svg> data is also non acceptable since I want to use the images as a refernced images.
我也阅读了 jQuery 解决方案，但我使用的是 angularJS.
I've also read about jQuery solution but I use angularJS.
所以，我已经阅读了很多关于 SVG 图标的能力，以及它们比旧的 PNG-Sprite 或 IconFonts 炒作更好的地方.但不幸的是，我找不到任何使用它的好参考.有人可以帮我吗?
So, I've read a lot about the ability of SVG Icons, and how better they are rather than the old PNG-Sprite or the IconFonts hype. but unfortunatelly, I cant find any good reference for using it. Can anyone help me here?
已经试过了，这不起作用:
tried this already, this doesn't work:
html:
<object data="your.svg" type="image/svg+xml" id="myImage"></object>
css:
#myImage {
fill: #fff;
}
推荐答案
对于 操作，请阅读 如何使用 CSS 更改 SVG 图像的颜色(jQuery SVG 图像替换)?
For <img> manupulation, read How to change color of SVG image using CSS (jQuery SVG image replacement)?
对于嵌入，您有 3 个选择:-
For embedding you have 3 choices:-
<object id="myObj" data="image.svg" width="200px" height="200px" type="image/svg+xml"></object>
<embed id="myEmb" src="image.svg" type="image/svg+xml" width="200px" height="200px" ></embed>
<iframe id="myIfr" src="image.svg" width="200" height="200" style="border:0" ></iframe>
假设 image.svg 包含这个红色圆圈:<circle id="redcircle" cx="100" cy="100" r="50" fill="透明"stroke="red"stroke-width="3""/>
Say the image.svg contains this circle in red: <circle id="redcircle" cx="100" cy="100" r="50" fill="transparent" stroke="red" stroke-width="3""/>
要操作这个颜色，试试这个函数:ColObj('myObj','blue'), ColObj('myEmb','blue') 或 ColObj('myIfr','blue')
To manipulate this color, try this function: ColObj('myObj','blue'), ColObj('myEmb','blue') or ColObj('myIfr','blue')
function getSubDocument(embedding_element)
{
if (embedding_element.contentDocument)
{
return embedding_element.contentDocument;
}
else
{
var subdoc = null;
try {
subdoc = embedding_element.getSVGDocument();
} catch(e) {}
return subdoc;
}
}
function ColObj(elem, color)
{
var elms = document.getElementById(elem);
var subdoc = getSubDocument(elms);
if (subdoc)
subdoc.getElementById("redcircle").setAttribute("stroke", color);
}
这篇关于使用 SVG 图像的最佳实践?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
