使用SVG图像的最佳做法？ [英] Best practice for using SVG images?

问题描述

我的研究提出了几种方法来在HTML页面中插入SVG图像。
使用< img> 是最简单的一个，但缺乏能力作为着色的图标，这是我的主要需要。所以，我已经阅读关于使用< object> ，但这仍然不允许我使用CSS样式填充命令。
由于我要将图片用作引用的图片，因此将大量的< svg> 数据也不可接受。

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

推荐答案

>< img> manupulation，阅读如何使用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:-

1. < object id =myObjdata =image.svgwidth = 200pxheight =200pxtype =image / svg + xml>< / object>

< embed id =myEmbsrc =image.svgtype =image / svg + xmlwidth =200pxheight =200px>< / embed>

< iframe id =myIfrsrc =image.svgwidth =200height =200 style =border：0>< / iframe>

image.svg 包含红色圆圈：< circle id =redcirclecx =100cy =100r = 50fill =transparentstroke =redstroke-width =3/>

尝试此函数： ColObj（'myObj'，'blue'）， ColObj（'myEmb'，'blue'）或 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屋！