html - 通过 HTML 将文件中的 CSS 应用到 SVG 文件

Question

晚上好

我有多个 SVG 文件，需要动态更改它们的填充颜色。最好使用 CSS。

HTML:

    <div>
       <svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin meet">
          <image xlink:href="http://imgh.us/export_1.svg" width="64" height="64" />
       </svg>
    </div>

CSS:

    div {
        width: 64px;
        height: 64px;
    }

    svg, svg * {
        fill: #000000 !important;
    }

SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="72.121px" height="59.209px" viewBox="0 0 72.121 59.209" enable-background="new 0 0 72.121 59.209" xml:space="preserve">
    <g>
        <path fill="#ff0000" d="M71.53,36.664L57.56,22.705c-0.57-0.57-1.43-0.74-2.18-0.43c-0.74,0.31-1.23,1.04-1.23,1.84v5.59h-4.32
            v-12.6c0-0.53-0.22-1.05-0.609-1.43L33.6,0.564c-0.22-0.21-0.47-0.36-0.75-0.45c-0.1-0.04-0.2-0.06-0.31-0.08
            c-0.06-0.01-0.12-0.02-0.18-0.02h-0.08c-0.06-0.01-0.13-0.01-0.19-0.01H2c-1.1,0-2,0.89-2,2v55.2c0,1.11,0.9,2,2,2h45.83
            c1.101,0,2-0.89,2-2v-10.75h4.32v5.591c0,0.81,0.49,1.54,1.23,1.85c0.25,0.1,0.51,0.15,0.77,0.15c0.521,0,1.03-0.2,1.41-0.58
            l13.97-13.971c0.38-0.38,0.59-0.88,0.59-1.409C72.12,37.545,71.91,37.045,71.53,36.664z M45.83,55.204H4v-51.2h26.21v13.1
            c0,1.11,0.89,2,2,2h13.62v10.6H34.91c-1.1,0-2,0.9-2,2v12.75c0,1.11,0.9,2,2,2H45.83V55.204z"/>
        <path fill="#ff0000" d="M32.28,0.015c-0.06-0.01-0.13-0.01-0.19-0.01h0.12C32.23,0.004,32.26,0.015,32.28,0.015z"/>
    </g>
    <g>
        <path fill="#ff0000" d="M32.21,0.004h-0.12c0.06,0,0.13,0,0.19,0.01C32.26,0.015,32.23,0.004,32.21,0.004z"/>
    </g>
    </svg>

Here's一把 fiddle 。

我的问题很简单。使用 SVG 文件填充颜色，而不是 CSS 中的填充颜色。这是有道理的，因为它是不同的文档。

由于各种原因我无法编辑 SVG 文件。

是否有解决方案，它会是什么样子？

Answer 1

如果你想单独使用 SVG 和图像标签，你需要使用 javascript 来操作/重新创建图像以使用过滤器/颜色/css:

How to change color of SVG image using CSS (jQuery SVG image replacement)?

如果您想使用纯 CSS，您需要将 SVG 直接嵌入到页面中。