0

建物を建設するための svg ツールを作成しています。(rect ツールを使用して) 部屋を作成し、それをグループ化して、その部屋の名前を配置したいと考えています。 rect ですが、次回はテキスト要素内の名前を既に終了する必要があります。以下は私のコードです

    var svgns = 'http://www.w3.org/2000/svg';     
    var ex_x=70;
    var ex_y=30;

    var hidden = parseInt($("#svg_group_osiz_1").val());    
    var gethide_curtselid=$("#hide_curtselid").val();      
    var gethide_curtselid12=$("#hide_curtdrawx_id").val();     
    var gethide_curtselid13=$("#hide_curtdrawy_id").val();       

    var x=parseInt(gethide_curtselid12) + parseInt(ex_x);  
    var y=parseInt(gethide_curtselid13) + parseInt(ex_y);            

    var text = document.createElementNS(svgns, 'text');  

    text.setAttributeNS(null, 'x', x); 
    text.setAttributeNS(null, 'y', y);           
    text.setAttributeNS(null, 'fill', '#343938');    
    text.setAttributeNS(null, 'text-anchor', 'middle');
    text.textContent =room_name;    

    var html =$( "#"+gethide_curtselid ).html();        

    if(html.contains("</text>"))
    {       
        var start_string=html.indexOf("<text");
        var end_string  =   html.indexOf("</text>");        
        end_string      =   end_string+7;   
        remove_string   =   html.substring(start_string,end_string);        
        var content_replaced = html.replace(remove_string,"");      

        $( "#"+gethide_curtselid ).html(content_replaced);
        var replaced_html =$( "#"+gethide_curtselid ).html();   

    }   

    $( "#"+gethide_curtselid ).append(text);

ここで、テキストがグループに既に存在するかどうかを確認し、それを空に置き換えて、再度テキストを追加しましたが、うまくいきました。誰でもガイドできますか

4

3 に答える 3

3

textNode の ID を設定してみてください

var text = document.createElementNS(svgns, 'text');  
text.setAttributeNS(null, 'x', x); 
text.setAttributeNS(null, 'y', y);           
text.setAttributeNS(null, 'fill', '#343938');    
text.setAttributeNS(null, 'text-anchor', 'middle');
text.setAttributeNS(null, 'id', 'roomName');
text.textContent =room_name;

次に、jsのようなものを使用して操作できます

document.getElementById('roomName').textContent = "new text";
于 2014-07-16T08:08:36.537 に答える
0

Internet Explorer に問題があると思われます。これは、JQuery html()メソッドがコンテナ <text>内の要素に適用されると「未定義」を返すためです。JQuery html()は Chrome では機能しますが、Internet Explorer では機能しません。代わりにJQuery text()メソッドを使用してください。要素の内部 HTML 全体は返されず、テキストのみが返されますが、SVG 内のテキストでは問題になりません。<svg> 

<svg width="200px" height="200px">
<text x="50%" y="50%" fill="#AAA">Some text</text>
</svg>

クロム：

> $("svg text").html()
"Some text"

IE11:

$("svg text").html()
undefined

これは、Chrome と IE の両方で機能します。

> $("svg text").text()
"Some text"
于 2016-10-27T19:29:57.260 に答える
-1

すでに jQuery を使用している場合は、それをさらに活用してください。

var ex_x=70;
var ex_y=30;

var hidden = parseInt($("#svg_group_osiz_1").val());    
var gethide_curtselid=$("#hide_curtselid").val();      
var gethide_curtselid12=$("#hide_curtdrawx_id").val();     
var gethide_curtselid13=$("#hide_curtdrawy_id").val();       

var x=parseInt(gethide_curtselid12) + parseInt(ex_x);  
var y=parseInt(gethide_curtselid13) + parseInt(ex_y);

// find existing text element
var $parent = $( "#"+gethide_curtselid );
var $text = $parent.find('text');

// if there is no <text>, create a <text> element with fixed value attributes
// and append it to $parent.
if ($text.length == 0) {
   $text = $('<text fill="#343938" text-anchor="middle" />').appendTo($parent);
}

// set attributes and text content.
$text.text( room_name ).attr( {x: x, y: y} );
于 2014-07-16T08:21:30.067 に答える