首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery修改svg文件

使用jQuery修改svg文件
EN

Stack Overflow用户
提问于 2011-04-13 00:18:37
回答 4查看 40.1K关注 0票数 17

我有一个带有一些形状和一些文本的svg文件。我想在运行时修改svg,这样一些形状可以改变颜色,一些文本可以改变其内容。

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

  1. circle1:一个带有id
  2. text1的蓝色实心圆圈:一个包含带有id

的"--“的文本

现在,我可以用以下命令查看html中的文件:

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

从图像附近的一个按钮,使用jQuery,我可以捕获onClick事件:我想用红色填充图标,并将文本更改为"hello word“。

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

我找到了jquery.svg插件,但似乎只能修改运行时创建的文档。

谢谢。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-04-13 17:29:48

完成了!

最后,我找到了关于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的

  1. 我可以访问SVG文件中的元素,标准的html标记
  2. SVG允许您选择设置填充颜色的方式。

2a。有风格的

rect.css('fill','green');

2b。使用特定的标签

填充(‘rect.attr’,‘绿色’);

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

祝您今天愉快。

票数 14
EN

Stack Overflow用户

发布于 2011-04-13 01:24:25

嗯,有一个很棒的库,你可以在jQuery或任何其他javascript中使用:

拉斐尔JS:http://raphaeljs.com/

看看这些示例,你几乎可以做任何事情。

票数 2
EN

Stack Overflow用户

发布于 2011-04-13 03:22:07

我使用JavaScript使用svgweb来显示和以编程方式操作SVG。我之所以使用它,是因为它使用闪存将SVG移植到IE6+,并且提供了一些简洁的SVG加载特性。

因为我非常喜欢使用jQuery,所以我给它打了补丁,使其可以与svgweb一起使用。我以Keith伍兹脚本为例。Keith的代码不支持最新版本的jQuery。

这是补丁:jquery.svgweb-and-svgdom-patch我一直想在svgweb工具中给它一个合适的位置,但还没来得及实现。它基于Keith的补丁,但有一些更新。需要知道的是,对于IE,在加载jQuery之前,您需要将以下代码放入脚本中:

document.querySelectorAll = null;

仅在jQuery加载之后执行此操作是不够的,因此您必须在jQuery之前使用服务器端浏览器检测来注入它,或者在脚本中使用客户端浏览器检测。

在那之后..。你可以这样做:

$('#mycirc').attr('fill', 'Red');
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5638431

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档