使用jQuery修改SVG文件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (125)

我有一个SVG文件,有一些形状和一些文字。我想在运行时修改SVG,以便某些形状可以更改颜色,而一些文本可以更改其内容。

假设外部SVG文件中只有两个元素:

  1. 圆圈1:一个充满蓝色的圆圈
  2. Text 1:一个包含“--”的文本

现在,我可以使用

<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>

从图片附近的按钮,使用jQuery,我可以捕捉onClick事件:我想用红色填充Cical,并将文本更改为“hello word”。

我该怎么做?有基于jQuery的解决方案吗?

提问于
用户回答回答于

让我们从代码开始:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script> 
</head>
<body>

<script type="text/javascript">

$(document).ready(function() 
    {
    $("#svgload").svg({
        onLoad: function()
            {
            var svg = $("#svgload").svg('get');
            svg.load('Red1.svg', {addTo: true,  changeSize: false});        
            },
        settings: {}}
        );  


    $('#btnTest').click(function(e)
        {
        var rect = $('#idRect1');
        rect.css('fill','green');
        //rect.attrib('fill','green');

        var txt = $('#idText1');
        txt.text('FF');
     });    

    });
</Script>   

<div id="svgload" style="width: 100%; height: 300px;"></div>

<div id="btnTest">
Click Me!
</div>

</body>
</html>

这个示例Red1.svg文件:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

<rect id="idRect1" fill="#FF0000" width="300" height="300"/> 
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>

</svg>

使用jQuery,我在运行时加载了外部Red1.svg。点击btnTest我设置了文本和填充颜色。

在我的研究中,我发现:

  1. 使用jQuery.svg,我可以访问SVG文件和标准html标记中的元素
  2. SVG允许你选择设置填充颜色的方式。 2a.带着一种风格 矩形(“填充”,“绿色”); 带有特定标签的2b。 矩形(“填充”,“绿色”);

因此,你的代码必须根据生成SVG的程序进行更改。

用户回答回答于

扫码关注云+社区

领取腾讯云代金券