javascript - 通过图像标签加载 SVG 并能够在不使用 AJAX 获取内联 SVG 的情况下更改其颜色?
问题描述
对于我工作的公司,我需要为 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 解决方案,只要它们适用于每个浏览器。
解决方案
现代浏览器可以通过使用 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>
推荐阅读
- fonts - Adobe Acrobat 表单文本字段中的 Code128 条码
- java - Java String to Neo4J Create Graph 语句
- python - 由 tf.data.Dataset.from_tensor_slices 填充的 tf.data.Dataset 是否会制作数据的深层副本?
- javascript - MVC 模式结构(在哪里以及如何?)
- excel - Excel VBA - 通过将单元格的内容添加到旧文件名的第一个空格中,将文件重命名为同一目录
- express-gateway - express-gateway : 合并请求
- machine-learning - 随机森林分类,测试训练数据
- sql-server - 用 SQL Server 备份中的数据替换实时数据库中的 NULL 列
- c# - 使用 REST API 在 Azure 中创建表
- google-apps-script - 向网站中的 Gmail 联系人悬停小部件添加按钮