Question

我的研究提出了几种在html页面中插入SVG图像的方法。使用<img>是最简单的，但缺乏为图标着色的能力，这是我的主要需求。所以，我已经阅读了有关使用<object>的内容，但这仍然不能让我使用css fill命令设置样式。放置大量<svg>数据也是不可接受的，因为我想将图像用作引用图像。

我也读过jQuery解决方案，但我使用的是angularJS。

所以，我已经阅读了很多关于SVG图标的能力，以及它们有多好，而不是旧的PNG-Sprite或IconFonts炒作。但不幸的是，我无法找到任何使用它的好参考。谁能在这帮助我？

已经尝试过，这不起作用：

HTML：

<object data="your.svg" type="image/svg+xml" id="myImage"></object>

的CSS：

#myImage {
    fill: #fff;
}

Answer 1

对于<img>操作，请阅读How to change color of SVG image using CSS (jQuery SVG image replacement)?

对于嵌入，您有3种选择： -

<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="transparent" stroke="red" stroke-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);

}

Answer 2

This guide from CSS tricks是迄今为止我发现的最佳参考资料。

不幸的是，您的选择仅限于使用CSS来设置未内联的SVG样式。它涉及将样式嵌入SVG文件中或从SVG本身链接到样式表。

CSS技巧guide中讨论了这两种技术。

这是展示链接CSS技术的JSFiddle。

以下是它的工作原理：

从CSS中链接到样式表，并将类添加到各个路径：


    <?xml-stylesheet type="text/css" href="mysvg.css"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
        <path class="demo-content" d="M11.31 44.5l12.69-12.3 12.691 12.3 7.809-8.2-12.69-12.3 12.69-12.3-7.809-8.2-12.691 12.3-12.69-12.3-7.81 8.2 12.691 12.3-12.691 12.3 7.81 8.2z" fill="rgb(98.34%, 88.24%, 32.2%)"/>
        <path class="demo-border" d="M11.31 44.5l12.69-12.3 12.691 12.3 7.809-8.2-12.69-12.3 12.69-12.3-7.809-8.2-12.691 12.3-12.69-12.3-7.81 8.2 12.691 12.3-12.691 12.3 7.81 8.2z" stroke="#ccc" stroke-linecap="square" fill="none"/>
    </svg>

创建css文件，在本例中为mysvg.css：



    .demo-content {
      fill: #FF0000;
    }

如果您试图有条件地设置SVG的样式，那么除了嵌入它之外，您可能没有其他选择。

使用SVG图像的最佳实践？

2 个答案: