我有一个 svg 文件，其中包含一些形状和一些文本。我想在运行时修改 svg，以便某些形状可以更改颜色，某些文本可以更改其内容。
假设我的外部 svg 文件中只有两个元素：
圆圈 1：具有该 id 的蓝色实心圆圈
text1：包含该 id 的“--”的文本
现在我可以在我的 html 中查看该文件
<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>
从图像附近的按钮，使用 jQuery，我可以捕获 onClick 事件：我想用红色填充 cicle 并将文本更改为“hello word”。
我怎样才能做到这一点？有基于 jQuery 的解决方案吗？
我找到了 jquery.svg 插件，但似乎您只能修改运行时创建的文档。
Thanks.
Done!
最后我找到了有关 jQuery.svg 的文档。以及 svg 本身。
让我们从代码开始：
<!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我设置了文本和填充颜色。
在我的研究中我发现：
- 使用 jQuery.svg 我可以访问 SVG 文件和标准 html 标签中的元素
-
SVG 允许您选择设置填充颜色的方式
2a.有风格
rect.css('fill','green');
2b.带有特定标签
rect.attr('fill','green');
因此，您的代码必须根据生成 svg 的程序进行更改。
祝你今天过得愉快。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
