htmlラーニング-SVGで要素を動的に追加
4362 ワード
通常、1つのページに要素を追加するときは、特にjqueryを使用する場合は簡単です.
たとえば、次のコードがあります.
このページにテキストを追加したいのですが、次のjsコードを追加するだけです.
しかし、svgの要素ではだめです.次のコードを追加するとします.
効果はありません.
方法:2種類:1.
私はここで方法1を書かないで、自分でw 3 cに行って見て、第2の方法を言います:
これでいい!
たとえば、次のコードがあります.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page</title>
</head>
<body>
<div id="page">
</div>
<div id="page_second">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" id="map">
<rect id="rect1" x="100" y="100" width="100" height="50" fill="red"/>
</svg>
</div>
</body>
</html>このページにテキストを追加したいのですが、次のjsコードを追加するだけです.
<script> $(document).ready(function() { $('#page').append('<span> </span>'); }); </script>しかし、svgの要素ではだめです.次のコードを追加するとします.
$(svg).append("<text> </text>");効果はありません.
方法:2種類:1.
$(svg).html()という方法を使用します.2.createElementNS使用私はここで方法1を書かないで、自分でw 3 cに行って見て、第2の方法を言います:
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
var inText = $(text).attr({
id: business_arr[bu]['id'],
x: business_arr[bu]['xLable'],
y: business_arr[bu]['yLable']
});
$(text).text(business_arr[bu]['name']);
$('#map').append(inText);これでいい!