载入外部的 svg 图形，怎么改变其颜色？

This topic created in 2441 days ago, the information mentioned may be changed or developed.

看了几个都是直接在 html 里用 svg 标签的，如果外部导入，我用 embed，好像就读不到 svg 内部的属性了。
请问有什么方法可以用嘛？因为 svg 每次都不同，我需要载入外部的 svg。
svg 文件形态如下（ illustrator 生成的）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FF0000;}
	.st1{fill:#FCEE21;}
	.st2{fill:#FFFFFF;}
</style>
<g id="main">
	<g>
		<circle class="st0" cx="400" cy="400" r="300"/>
	</g>
</g>
<g id="second">
	<g>
		<g>
			<path class="st1" d="M400,650c102.51,0,190.6-61.71,229.18-150H170.82C209.4,588.29,297.49,650,400,650z M400,150
				c-102.51,0-190.6,61.71-229.18,150h458.36C590.6,211.71,502.51,150,400,150z"/>
		</g>
	</g>
</g>
<g id="stroke">
	<g>
		<g>
			<path class="st2" d="M400,140c-143.59,0-260,116.41-260,260s116.41,260,260,260s260-116.41,260-260S543.59,140,400,140z M400,160
				c92.9,0,173.46,52.79,213.35,130H186.65C226.54,212.79,307.1,160,400,160z M177.46,310h445.07c11.25,27.8,17.46,58.17,17.46,90
				s-6.21,62.2-17.46,90H177.46C166.21,462.2,160,431.83,160,400S166.21,337.8,177.46,310z M400,640
				c-92.9,0-173.46-52.79-213.35-130h426.71C573.46,587.21,492.9,640,400,640z"/>
		</g>
	</g>
</g>
</svg>

4 replies

rabbbit

Sep 9, 2019

兼容性都不咋地

1
<embed src="1.svg" type="image/svg+xml">
e = $('embed').getSVGDocument()
e.querySelector('style').innerHTML += '.st0 {fill: #000000!important;}'

2
<iframe src="1.svg"></iframe>
i = $('iframe').contentDocument
i.querySelector('style').innerHTML += '.st0 {fill: #000000!important;}'

3 <img src="1.svg" class="filter-green" style="filter: invert(46%) sepia(91%) saturate(7481%) hue-rotate(352deg) brightness(102%) contrast(133%);"/>

4
fetch("./1.svg")
.then(response => {
..return response.text()
})
.then(text => {
..const parser = new DOMParser();
..const html = parser.parseFromString(text, "text/html");
..const svg = html.documentElement.querySelector("svg");
..document.body.appendChild(svg);
})

sker101

Sep 9, 2019

没办法改能跟生成 svg 文件的人商量就 svg 文件里面加颜色不然就找个加载图标替换 svg 内容然后延迟加载把 svg 用 js 下载下来插入到 HTML 文档中就像你说的第四个

SilentDepth

Sep 9, 2019

设法暴露 <svg> 节点。直接插入 svg 文档也行，用 <use> 引用也行。

JCZ2MkKb5S8ZX9pq

Sep 10, 2019

结果我直接把 svg 作为 txt 导入然后 append 进去了