通過圖像標簽加載 SVG 並能夠在不使用 AJAX 獲取內聯 SVG 的情況下更改其顏色？

Question

對於我工作的公司，我需要為 web 應用程序加載 SVG。 SVG 位於由 HTML 代碼組成的組件中。 這些組件被加載到更大的 HTML 結構中。 每個組件可以有不同的 SVG 圖標，並且必須易於更改。 它的顏色也必須能夠通過 CSS 進行更改。

I can not write down inline SVG, because administrators must be able to easily change the image (eg: from https://example.com/svg/potato.svg to https://example.com/svg/carrot.svg .我也不能使用任何 AJAX/fetch 相關函數來獲取內聯 SVG，因為該組件必須能夠在測試域上完美運行，這將觸發 CORS 錯誤。更改 Z5A8FEFF0B4BDE3EEC9244B76023 設置不是此應用程序的選項。

我剩下的唯一選擇是加載所有 SVG（目前 10 個，但可以隨時縮放）並尋找正確的，這取決於用戶輸入的 svg 名稱。 我可以讓用戶像這樣調用 JS function： showSVG('carrot'); ，但為了加載時間，我寧願不加載所有 SVG。

一些答案告訴您使用 CSS filter ，但這需要用戶可能查找正確的過濾器以獲得正確的十六進制代碼。 我只是希望用戶能夠像這樣編寫 CSS： fill: #eee; 我還檢查了 CSS mask ，但它有ok-ish支持，所以我現在不想使用它。

這是我想要實現的示例：

HTML

<div class="img">
        <img src="https://example.com/svg/carrot.svg" alt="">
        <p>Test component</p>
</div>

CSS

.img {
  fill: yellow; 
}

我願意接受最駭人聽聞的 Javascript 解決方案，只要它們適用於每個瀏覽器。

Answer 1

現代瀏覽器可以通過使用 SVG <use>元素在沒有 JS 的情況下做到這一點。 但是，我建議對舊版瀏覽器（包括 IE11）使用svgxuse 之類的 JS 填充程序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
    border: 2px solid black;
}
svg {
    border: 2px solid goldenrod;
}

svg[class*=fill-] {
    font-size:56px;
    font-weight: bold;
    font-family: Verdana, Helvetica, sans-serif;
    /* When using the <use> element, you need to set the styles in the page, 
    but when loading it as a regular image, styles set within the SVG file will be used. 

    Be careful about using inline styles to set any colors, since those will override others. */
}
svg.fill-blue {
    color: blue;
    fill: currentColor;
}
svg.fill-green {
    color: green;
    fill: currentColor;
}
svg.fill-orange {
    fill: orange; /* the currentColor value trick is optional */
}
</style>
</head>
<body>

<img src="external-svg-example.svg" alt="">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="90">
<image xlink:href="external-svg-example.svg" width="720" height="90"/>
</svg>

<!-- It may be desirable to place the xmlns:xlink attribute in the <html> tag instead of each <svg> tag. -->

<!-- Note that IE11 and older and some older versions of other browsers 
do not support loading external SVGs via the <use> element.
JS workarounds do exist, e.g. https://github.com/Keyamoon/svgxuse

More info:
https://stackoverflow.com/questions/22516712/svg-use-tag-with-external-reference-in-ie-11 -->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="90" class="fill-blue">
<use xlink:href="external-svg-example.svg#g1"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="90" class="fill-green">
<use xlink:href="external-svg-example.svg#g1"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="90" class="fill-orange">
<use xlink:href="external-svg-example.svg#g1"/>
</svg>

<script src="svgxuse.js" defer></script>
</body>
</html>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 90" width="720" height="90">
<style>
svg:root {
    /* "svg:root" is used so this rule won't interfere with other styles when this SVG is injected into a page via JS. */
    color: red;
    fill: currentColor;
    font-size:56px;
    font-weight: bold;
    font-family: Verdana, Helvetica, sans-serif;
}
</style>
<g id="g1">
<text y="70" x="28">This is Our Test Text</text>
</g>
</svg>

通過圖像標簽加載 SVG 並能夠在不使用 AJAX 獲取內聯 SVG 的情況下更改其顏色？

問題描述

1 個解決方案

解決方案1
1 2019-11-15 05:28:14

通過圖像標簽加載 SVG 並能夠在不使用 AJAX 獲取內聯 SVG 的情況下更改其顏色？

問題描述

1 個解決方案

解決方案1 1 2019-11-15 05:28:14

解決方案1
1 2019-11-15 05:28:14