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

這是一個小提琴。

我的問題很簡單。 代替CSS中的填充顏色，使用了SVG文件填充顏色。 這是有道理的，因為它是一個不同的文檔。

由於各種原因，我無法編輯SVG文件。

有解決方案嗎？

Answer 1

如果您想單獨使用SVG和Image標簽，則需要使用javascript來操縱/重新創建圖像以使用濾鏡/顏色/ css：

如何使用CSS更改SVG圖像的顏色（jQuery SVG圖像替換）？

如果要使用純CSS，則需要直接在頁面中嵌入SVG。