通过图像标签加载 SVG 并能够在不使用 AJAX 获取内联 SVG 的情况下更改其颜色？答案

【问题标题】：Load SVG's through image tag and be able to change it's color without fetching inline SVG with AJAX?通过图像标签加载 SVG 并能够在不使用 AJAX 获取内联 SVG 的情况下更改其颜色？
【发布时间】：2019-11-15 13:28:14
【问题描述】：

对于我工作的公司，我需要为 Web 应用程序加载 SVG。 SVG 位于由 HTML 代码组成的组件中。这些组件被加载到更大的 HTML 结构中。每个组件可以有不同的 SVG 图标，并且必须易于更改。它的颜色也必须能够通过 CSS 改变。

我可以不写下内联 SVG，因为管理员必须能够轻松更改图像（例如：从 https://example.com/svg/potato.svg 到 https://example.com/svg/carrot.svg。我也可以不使用任何 AJAX/fetch 相关函数来获取内联 SVG，因为组件必须能够在测试域上完美运行，这将触发 CORS 错误。更改 CORS 设置不是此应用程序的选项。

我剩下的唯一选择是加载所有 SVG（目前 10 个，但可以随时缩放）并根据用户输入的 svg 名称查找正确的。我可以让用户像这样调用 JS 函数：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 解决方案，只要它们适用于所有浏览器。

【问题讨论】：

filter 可能没有你想要的效果，因为它改变了图像中的每一种颜色，而不仅仅是特定区域，但这是我现在唯一能想到的。如果您想使用它但希望用户能够轻松更改颜色，那么只需制作一个充当中间人的js函数：用户使用changeImageColor("#ff0000")之类的函数，该函数通过使用@来完成复杂的工作987654332@.
@ibrahimmahrir 图像应该是一种颜色，所以没关系。我想这个功能会起作用，但我担心过滤器可能不起作用。我见过的一些hex to filter 函数并不那么准确。你能给我看一个好的吗？
能否知道原图使用的颜色？
@ibrahimmahrir 我可以将默认颜色更改为所需的任何颜色。
你能用changeImageColor(hue, saturation, luminance)这样的HSL颜色系统代替RGB或HEX吗？

标签： javascript html css svg

【解决方案1】：

现代浏览器可以通过使用 SVG <use> 元素在没有 JS 的情况下做到这一点。但是，我建议对旧版浏览器（包括 IE11）使用 JS shim，例如 svgxuse。

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

【讨论】：