从外部源修改 SVG [英] Modify SVG from external source

问题描述

我尝试在 wordpress 中以多种方式添加 SVG inlive，但它不起作用可能是因为我复制代码时的语法(这里如果你想知道我在说什么)

I tried to add in many ways an SVG inlive in wordpress but it doesn't work probably because of the syntax when I copied the code inside ( HERE if you want to know of what I'm talking about)

所以我需要从外部来源(SVG 文件)插入它，但我试图使用 CSS 修改它(仅更改填充颜色)(每条路径都有其正确的 ID)，但没有任何效果.

So I need to insert it from an external source (SVG file) BUT I tried to modify it (only change fill color) with CSS (every path has his proper ID) and nothing works.

有没有办法在 jQuery 中做到这一点?有没有办法在DOM中修改它?

Is there a way to do that in jQuery? Is there a way to modify it in the DOM?

推荐答案

如果您通过 <object> 标签嵌入 svg 文件，您可以在 < 中使用外部样式表.svg> 文件

If you are embedding your svg file via <object> tag you can use an external stylesheet inside the <svg> file

例如在您应该使用的 html 文件中

e.g in your html file you should use

<object data="svg-file.svg"></object>

并在您的 svg 文件中使用

and in your svg file use

<?xml-stylesheet type="text/css" href="yourstylesheet.css" ?>   
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

将外部样式表链接到您的 svg 文件.如果您还想使用脚本来操作 svg 文件，我建议您使用 ecmascript.它应该看起来像这样:

to link an external stylesheet to your svg file. If you also want to use a script for manipulating your svg file I recommend using ecmascript. It should look something like this:

<svg>
....
  <script type="text/ecmascript"><![CDATA[
  //some script code here
 ]]></script>
...
</svg>

这篇关于从外部源修改 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！