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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1888 天前的主题，其中的信息可能已经有所发展或是发生改变。

看了几个都是直接在 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 条回复

rabbbit

2019-09-09 22:58:52 +08:00

兼容性都不咋地

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

2019-09-09 23:16:49 +08:00

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

SilentDepth

2019-09-09 23:31:43 +08:00

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

JCZ2MkKb5S8ZX9pq

2019-09-10 01:00:53 +08:00

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