Question

对于我所在的公司，我需要为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名称寻找合适的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解决方案。

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 个答案: