Javascript 加载SVG'；通过图像标签，并能够更改它'；在不使用AJAX获取内联SVG的情况下使用s颜色？
对于我工作的公司，我需要为web应用程序加载SVG。SVG位于由HTML代码组成的组件中。这些组件被加载到一个更大的HTML结构中。每个组件都可以有不同的SVG图标，并且必须易于更改。它的颜色也必须能够通过CSS改变 我可以不写内联SVG，因为管理员必须能够轻松更改图像（例如：fromJavascript 加载SVG'；通过图像标签，并能够更改它'；在不使用AJAX获取内联SVG的情况下使用s颜色？,javascript,html,css,svg,Javascript,Html,Css,Svg,对于我工作的公司，我需要为web应用程序加载SVG。SVG位于由HTML代码组成的组件中。这些组件被加载到一个更大的HTML结构中。每个组件都可以有不同的SVG图标，并且必须易于更改。它的颜色也必须能够通过CSS改变 我可以不写内联SVG，因为管理员必须能够轻松更改图像（例如：fromhttps://example.com/svg/potato.svg至https://example.com/svg/carrot.svg。我也可以不使用任何AJAX/fetch相关函数来获取内嵌SVG，因为组件必
https://example.com/svg/potato.svghttps://example.com/svg/carrot.svgshowSVG（'carrot'）；filterfill:35; eee；mask<div class="img">
<img src="https://example.com/svg/carrot.svg" alt="">
<p>Test component</p>
</div>
我对最黑的Javascript解决方案持开放态度，只要它们适用于每种浏览器。现代浏览器可以通过使用SVG
<!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>
img{
边框：2件纯黑；
}
svg{
边框：2件实心黄花；
}
svg[class*=fill-]{
字体大小：56px；
字体大小：粗体；
字体系列：Verdana、Helvetica、无衬线；
/*使用元素时，需要在页面中设置样式，
但是，当将其作为常规图像加载时，将使用SVG文件中设置的样式。
使用内联样式设置任何颜色时要小心，因为这些样式将覆盖其他颜色*/
}
svg.fill-blue{
颜色：蓝色；
填充：当前颜色；
}
svg.fill-green{
颜色：绿色；
填充：当前颜色；
}
svg.fill-orange{
填充：橙色；/*currentColor值技巧是可选的*/
}
svg:root{
/*使用“svg:root”是为了在通过JS将此svg注入页面时，此规则不会干扰其他样式*/
颜色：红色；
填充：当前颜色；
字体大小：56px；
字体大小：粗体；
字体系列：Verdana、Helvetica、无衬线；
}
这是我们的测试文本
过滤器 更改图像颜色（“ff0000”）theImage.style.filter=…hex to filterchangeImageColor（色调、饱和度、亮度）<!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>