通过HTML将CSS从文件应用到SVG文件

晚上好,

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

HTML:

SVG：

小提琴

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

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

---

有解决方案吗？它是什么样子的？

如果您想单独使用SVG和图像标记，您需要使用javascript来操纵/重新创建图像，以使用过滤器/颜色/css：

---

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

如果使用or标记而不是标记，则可以在运行时将CSS插入SVG，前提是它位于同一域上。或者通过XMLHttpRequest将SVG注入页面。注入样式是启发我最终解决方案的口号。遗憾的是，我可能不会发布它，因为它是后端代码。所选答案是我原始问题的正确答案。我现在使用JavaSpring后端在运行时编辑SVG文件，然后再将它们交付给客户机。

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

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

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

    <?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>