2

埋め込まれた SVG を更新したい。jQuery css セレクターを使用して SVG 要素を選択し、jQuery の .attr()関数を使用してその属性を変更します。FF では期待どおりに動作しますが、Safari では効果がありません。何か案は？

私のHTML内の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");

作業例:

Jsフィドル

  • OS: Mac OS X 10.7.3
  • ファイアフォックス: 11.0
  • サファリ: 5.1.5 (7534.55.3)
4

3 に答える 3

3

エレガントではありませんが、実用的なソリューションです。これにより、完全なsvgが更新されます。

$("#svg_cont").html($("#svg_cont").html());

ここ#svg_contで、はsvg要素のコンテナdivです。

于 2013-01-22T10:58:28.050 に答える
3

最初はこのようにテキストパスノードにIDを追加したと思います

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

次に、ノード内にhtmlコンテンツを追加し、最初に内部のコンテンツを削除するため、プロパティをテキストから追加する方法を変更します

$("#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/

于 2012-04-26T13:42:38.873 に答える
1

この SVG 更新の問題は難しい問題です。多くの調査の結果、ここで最良の解決策を見つけました：http://jcubic.wordpress.com/2013/06/19/working-with-svg-in-jquery/

基本的には作成...

$.fn.xml = function() {
    return (new XMLSerializer()).serializeToString(this[0]);
};

$.fn.DOMRefresh = function() {
    return $($(this.xml()).replaceAll(this));
};

次に、それを呼び出します

$("#diagram").DOMRefresh(); //where your <svg> tag has id="diagram"

それは奇跡ですが、うまくいきます！(Chrome と Firefox。他のブラウザーについては知りません。)

于 2014-06-10T20:00:26.720 に答える