Question

我试图在WordPress中以多种方式添加一个SVG inlive，但它不起作用可能是因为我复制内部代码时的语法（HERE if you want to know of what I'm talking about)

所以我需要从外部源（SVG file）插入它但是我试图用CSS修改它（只改变填充颜色）（每个路径都有正确的ID）并且没有任何作用。

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

Answer 1

你可以通过在jquery中使用方法“attr”来改变颜色。并设置SVG对象的颜色属性。

Jsfiddle

中的示例

以下是attr() in Jquery的链接！

以下是示例代码：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function test(){
    $('#id rect').attr("fill", "yellow");
    }
</script>
<button onclick="test()"> test</button>
 <svg id="id" width="125" height="65"><rect x="3" y="3" rx="20" ry="20"  width="120" height="60" fill="red" ></svg>

Answer 2

您无法使用CSS来更改嵌入式SVG的属性（即通过<img>，<object>等）。样式不适用于文档边界。

但是，如果您通过<object>嵌入，则可以使用DOM将CSS添加到SVG本身。

How to apply a style to an embedded SVG?

Answer 3

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

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

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

并在您的svg文件中使用

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

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

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

从外部源修改SVG

3 个答案: