SVG:通过jQuery更新可以在FF中使用，但不能在Safari中使用，有什么想法吗?

问题描述

我想更新嵌入式SVG.我使用 jQuery css选择器选择SVG元素，并通过 jQuery的.attr()函数更改其属性.它在FF中可以正常工作，但在Safari中不起作用.有任何想法吗?

I want to update an embedded SVG. I select the SVG element by using a jQuery css selector and alter it's attribute through jQuery's .attr() function. It works as expected in FF but shows no effect in Safari. Any Ideas?

SVG:

  <svg id="svgelem" height="150" width="400" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <path id = "s3" d = "M 60 70 L 220 30 L 300 60 L 180 120 L 60 70" fill = "green" stroke = "black" stroke-width = "3"/>
   </defs>
   <g fill = "navy">
    <text font-size = "20">
     <textPath xlink:href = "#s3">
       Foo Bar
     </textPath>
    </text>
   </g>
  </svg>

JavaScript:

$("textPath").text("other text");
$("path").attr("d","M 60 70 L 90 30 L 300 60 L 180 120 L 60 70");

工作示例:

JsFiddle

• 操作系统:Mac OS X 10.7.3
• Firefox:11.0
• Safari:5.1.5(7534.55.3)

推荐答案

我认为我一开始就向这样的textpath节点添加了一个ID

I think that I got at first i added a id to textpath node like this

 <textPath id="test" xlink:href = "#s3">

第二，我将方式属性从文本更改为追加，因为您在节点内追加了html内容并首先删除了其中的内容

Second i change the way property from text to append because your append html content inside the node and removing first the content inside take a look

$("#bt_text").click(function(){
    $("#test").empty().append("other text allalaksddkfdsbbklas sldnsdd");});
$("#bt_coord").click(function(){
    $("path").attr("d","M 60 70 L 90 30 L 300 60 L 180 120 L 60 70");});​

这是现场示例

http://jsfiddle.net/FmhqX/23/

这篇关于SVG:通过jQuery更新可以在FF中使用，但不能在Safari中使用，有什么想法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！