V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端开发

载入外部的 svg 图形,怎么改变其颜色?

  •  
  •   JCZ2MkKb5S8ZX9pq · 2019-09-09 21:57:41 +08:00 · 3615 次点击
    这是一个创建于 1661 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 看了几个都是直接在 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>
    
    
    rabbbit
        1
    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
        2
    sker101  
       2019-09-09 23:16:49 +08:00
    没办法改 能跟生成 svg 文件的人商量就 svg 文件里面加颜色 不然就找个加载图标替换 svg 内容 然后延迟加载把 svg 用 js 下载下来插入到 HTML 文档中 就像你说的第四个
    SilentDepth
        3
    SilentDepth  
       2019-09-09 23:31:43 +08:00
    设法暴露 <svg> 节点。直接插入 svg 文档也行,用 <use> 引用也行。
    JCZ2MkKb5S8ZX9pq
        4
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-09-10 01:00:53 +08:00
    结果我直接把 svg 作为 txt 导入然后 append 进去了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3940 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:24 · PVG 18:24 · LAX 03:24 · JFK 06:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.