使用 jQuery 修改 svg 文件 [英] Modify a svg file using jQuery

查看：23 发布时间：2021/12/17 18:03:20 jquery svg

本文介绍了使用 jQuery 修改 svg 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带有一些形状和一些文本的 svg 文件.我想在运行时修改 svg，以便某些形状可以改变颜色，而某些文本可以改变其内容.

假设我在外部 svg 文件中只有两个元素:

circle1:一个带有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 插件，但似乎只能修改运行时创建的文档.

谢谢.

解决方案

完成！

我终于找到了关于 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"><头><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><身体><script type="text/javascript">$(document).ready(function(){$("#svgload").svg({加载:函数(){var svg = $("#svgload").svg('get');svg.load('Red1.svg', {addTo: true, changeSize: false});},设置:{}});$('#btnTest').click(function(e){var rect = $('#idRect1');rect.css('填充','绿色');//rect.attrib('fill','green');var txt = $('#idText1');txt.text('FF');});});</脚本><div id="svgload" style="width: 100%; height: 300px;"></div><div id="btnTest">点我！

还有这个示例 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">你好！</text></svg>

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

在我的研究中，我发现:

使用 jQuery.svg 我可以访问 SVG 文件和标准 html 标签中的元素
SVG 允许您选择设置填充颜色的方式
2a.有风格
```
 rect.css('fill','green');
```
2b.带有特定标签
```
 rect.attr('fill','green');
```

因此您的代码必须根据生成 svg 的程序进行更改.

祝你有美好的一天.

I have a svg file with some shape and some text. I'd like to modify the svg at runtime, so that some shape can change color, and some text can change its content.

Let's suppose that I have only two elements in an external svg file:

circle1: a blue filled circle witdh that id
text1: a text containing "--" with that id

Now I can view the file in my html with

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

From a button near the image, using jQuery, I can catch the onClick event: I'd like to fill the cicle with red and change the text to "hello word".

How can I do that? Is there a jQuery based solution?

I have found the jquery.svg plugin, but it seem that you can only modify a runtime created document.

Thanks.

解决方案

Done!

Finally I found documentation on jQuery.svg. and on svg itself.

Let's start with the code:

<!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>

And this sample Red1.svg file:

<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>

Using jQuery, I loaded the external Red1.svg at runtime. With a click on btnTest I set the text and the fill color.

In my research I have found that:

With jQuery.svg I can access the elements in the SVG file and standard html tag
SVG lets you choose the way you want to set the fill color

2a. with a style
```
    rect.css('fill','green');
```
2b. with a specific tag
```
    rect.attr('fill','green');
```

So your code must change depending on the program that generated the svg.

Have a nice day.

这篇关于使用 jQuery 修改 svg 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 jQuery 修改 svg 文件 [英] Modify a svg file using jQuery

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

使用 jQuery 修改 svg 文件 [英] Modify a svg file using jQuery

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭