blocks|key|413200|text|嗯，有一个很棒的库，你可以在jQuery或任何其他javascript中使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413201|拉斐尔JS：http://raphaeljs.com/|offset|length|413202|看看这些示例，你几乎可以做任何事情。|413203|entityMap|0|LINK|mutability|MUTABLE|url|http://raphaeljs.com/^0|0|6|L|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Well, there's a FANTASTIC library that you can use with jQuery or any other javascript:

Raphael JS: <a href="http://raphaeljs.com/" rel="nofollow">http://raphaeljs.com/</a>

Check out the samples, you can do just about anything.

blocks|key|413205|text|我使用JavaScript使用svgweb来显示和以编程方式操作SVG。我之所以使用它，是因为它使用闪存将SVG移植到IE6%2B，并且提供了一些简洁的SVG加载特性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|413206|因为我非常喜欢使用jQuery，所以我给它打了补丁，使其可以与svgweb一起使用。我以Keith伍兹脚本为例。Keith的代码不支持最新版本的jQuery。|413207|这是补丁：jquery.svgweb-and-svgdom-patch我一直想在svgweb工具中给它一个合适的位置，但还没来得及实现。它基于Keith的补丁，但有一些更新。需要知道的是，对于IE，在加载jQuery之前，您需要将以下代码放入脚本中：|413208|document.querySelectorAll+=+null;|code-block|syntax|javascript|413209|仅在jQuery加载之后执行此操作是不够的，因此您必须在jQuery之前使用服务器端浏览器检测来注入它，或者在脚本中使用客户端浏览器检测。|413210|在那之后..。你可以这样做：|413211|$('#mycirc').attr('fill',+'Red');|413212|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/svgweb/|1|http://www.beechtreetech.com/jquery.svgweb-and-svgdom-patch.js^0|F|6|0|0|0|5|U|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|C|$]]|$1|Q|3|R|5|J|7|1E|8|@]|9|@]|C|$K|L]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

I use <a href="http://code.google.com/p/svgweb/" rel="nofollow">svgweb</a> to display and programmatically manipulate SVGs using JavaScript. I use it because it ports SVG to IE6+ using Flash, and because it provides some neat SVG loading features.

Since I like using jQuery so much, I patched it to work with svgweb. I used Keith Woods script as an example. Keith's code doesn't support the latest version of jQuery.

Here is the patch: <a href="http://www.beechtreetech.com/jquery.svgweb-and-svgdom-patch.js" rel="nofollow">jquery.svgweb-and-svgdom-patch</a> I've been meaning to give it a proper home in the svgweb contrib, but haven't gotten around to it. It's based on Keith's patch, but has some updates. One thing to know, is that for IE, you'll need to put the following code in a script before jQuery loads:

<pre><code>document.querySelectorAll = null;
</code></pre>

It's not enough to do this after jQuery loads anymore, so you'd have to use server-side browser detection to inject it, or client-side browser detection in a script before jQuery.

After all that... You can do stuff like:

<pre><code>$('#mycirc').attr('fill', 'Red');
</code></pre>

blocks|key|3248699|text|http://irunmywebsite.com/raphael/additionalhelp.php?q=path上面只是我网站上的一个互动例子，我只想说我发现拉斐尔的狗是准确的，但它们是最小的，我认为作者鼓励自我探索|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3248700|我在找借口说不好的英语！|3248701|entityMap|0|LINK|mutability|MUTABLE|url|http://irunmywebsite.com/raphael/additionalhelp.php?q=path^0|0|1M|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<a href="http://irunmywebsite.com/raphael/additionalhelp.php?q=path" rel="nofollow">http://irunmywebsite.com/raphael/additionalhelp.php?q=path</a>
The above is just one interactive example on my site
I would just say that I found Raphael dogs accurate but they are bear minimum, I think the author encourages self explore

I'm ipodding so excuse broken English!!

blocks|key|407525|text|完成了！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|407526|最后，我找到了关于jQuery.svg的文档。以及svg本身。|407527|让我们从代码开始：|407528|<!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%25;+height:+300px;"></div>

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

</body>
</html>|code-block|syntax|javascript|407529|和这个示例Red1.svg文件：|407530|<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>|407531|使用jQuery，我在运行时加载了外部Red1.svg。通过点击btnTest，我设置了文本和填充颜色。|offset|length|style|CODE|407532|在我的研究中我发现：|407533|带有jQuery.svg的|407534|我可以访问SVG文件中的元素，标准的html标记|ordered-list-item|407535|SVG允许您选择设置填充颜色的方式。|407536|407537|2a。有风格的|407538|rect.css('fill'，'green')；|407539|2b。使用特定的标签|407540|填充(‘rect.attr’，‘绿色’)；|407541|因此，您的代码必须根据生成svg的程序进行更改。|407542|祝您今天愉快。|407543|entityMap^0|0|0|0|0|0|0|W|7|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1K|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1L|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1M|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1N|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1O|8|@$Q|1P|R|1Q|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1R|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1S|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|1T|8|@]|9|@]|A|$]]|$1|11|3|12|5|10|7|1U|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1W|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|1X|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|20|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|21|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|1H|$]]

Done!

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

Let's start with the code:

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

&lt;script type="text/javascript" src="../js/jquery-1.5.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.svg/jquery.svg.js"&gt;&lt;/script&gt; 
&lt;/head&gt;
&lt;body&gt;

&lt;script type="text/javascript"&gt;

$(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');
 }); 

 });
&lt;/Script&gt; 

&lt;div id="svgload" style="width: 100%; height: 300px;"&gt;&lt;/div&gt;

&lt;div id="btnTest"&gt;
Click Me!
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

And this sample Red1.svg file:

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

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

&lt;/svg&gt;
</code></pre>

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

In my research I have found that:

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

2a. with a style

<pre><code> rect.css('fill','green');
</code></pre>

2b. with a specific tag

<pre><code> rect.attr('fill','green');
</code></pre></li>
</ol>

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

Have a nice day.

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:

<ol>
<li>circle1: a blue filled circle witdh that id</li>
<li>text1: a text containing "--" with that id</li>
</ol>

Now I can view the file in my html with

<pre><code>&lt;object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"&gt;&lt;/object&gt;
</code></pre>

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.

Modify a svg file using jQuery

服务器

jQuery

我有一个带有一些形状和一些文本的svg文件。我想在运行时修改svg，这样一些形状可以改变颜色，一些文本可以改变其内容。假设我在一个外部svg文件中只有两个元素：circle1:一个带有idtext1的蓝色实心圆圈:一个包含带有id的"--“的文本现在，我可以用以下命令查看html中的文件：<object data="S...

问使用jQuery修改svg文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery修改svg文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery修改svg文件
EN