タイトルが言っているように、JavaScriptを使用してHTMLページにSVG画像要素をプログラムで作成しようとしています。何らかの理由で私の基本的なJavaScriptコードは機能しませんが、raphaeljsライブラリを使用すればうまく動作します。だから明らかに私のjsに問題があります-私はそれが何であるかを理解できないようです。
(注:ターゲットブラウザはFF4 +です)
ここに、私がトップに到達しようとしているもののhtmlバージョンを含む基本ページがあります。
<html>
<head>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="test1"
height="200px"
width="200px">
<image
id="testimg1"
xlink:href="http://i.imgur.com/LQIsf.jpg"
width="100"
height="100"
x="0"
y="0"/>
</svg>
<hr />
<p id="testP1">
</p>
<hr />
<p id="testP2">
</p>
</body>
</html>
そして、ここに私のjavascriptがあります:
var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);
var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');
svg.appendChild(svgimg);
document.querySelector('#testP2').appendChild(svg);
SVGネイティブ属性(xlink:href
を含まない)は、SVG名前空間を共有しません。 setAttribute
の代わりにsetAttributeNS
のみを使用するか、または
svgimg.setAttributeNS(null,'x','0');
例えば。
動作しています: http://jsfiddle.net/UVFBj/8/
XHTMLを適切に使用するようフィドルを変更したことに注意してください。これにより、すべての主要なブラウザーでSVGがフィドル内でうまく機能するようになります。
詳細については。
次の関数を使用してSVG要素を作成しましたが、xlink:hrefのために画像を作成できませんでした。
以下のコードは修正されています(その場でsvg要素を作成します)
function makeSVG(parent, tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs){
if(k=="xlink:href"){
el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
}else{
el.setAttribute(k, attrs[k]);
}
}
}
サンプル使用法:
makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});
parent
は、svgグループタグの「レイヤー」を整理するために使用されます。