送信されたフォームのデータを使用して手動で SVG を構築しようとしています。
今度は、次のように SVG に画像を追加します。
<image x='" + parseFloat(element.left) + "' y='" + parseFloat(element.top) + "' width='" + parseInt(element.width) + "' height='" + parseInt(element.height) + "' xlink:href='" + element.data + "' />
完全な SVG コードを解析すると、次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="160" height="90">
<rect width="160" height="90" style="fill:rgb(255, 255, 255);stroke:rgb(0,0,0);stroke-width:0"></rect>
<img x="64" y="29" width="32" height="32" xlink:href="http://allette-bunt-tattoo.de/wp-content/themes/Allettebunt/images/twitter-icon.png">
</svg>
私にとっては正しいように見えます(から<image>
に変換されたイメージタグを除く<img>
)...
ここで奇妙なのは、ブラウザ/DOM への出力です。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="160" height="90">
<rect width="160" height="90" style="fill:rgb(255, 255, 255);stroke:rgb(0,0,0);stroke-width:0"></rect>
</svg>
<img x="64" y="29" width="32" height="32" xlink:href="http://allette-bunt-tattoo.de/wp-content/themes/Allettebunt/images/twitter-icon.png">
SVG は正しくレンダリングされますが、画像は SVG の横に表示されます。
「SVG add image」チュートリアルをいくつか検索しましたが、それらはすべて私と同じ方法で実行しているように見え、それらで機能します。私の場合、何が問題なのですか?
//EDIT SVG を次のようにビルドします。
var svg = $("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='" + parseInt(stampy.editor.width) + "' height='" + parseInt(stampy.editor.height) + "'></svg>");
svg.append("<rect width='" + parseInt(stampy.editor.width) + "' height='" + parseInt(stampy.editor.height) + "' style='fill:" + stampy.editor.background + ";stroke:rgb(0,0,0);stroke-width:" + (parseInt(stampy.editor.border) * 2) + "' />");
svg.append("<image x='" + parseFloat(element.left) + "' y='" + parseFloat(element.top) + "' width='" + parseInt(element.width) + "' height='" + parseInt(element.height) + "' xlink:href='" + element.data + "' />");
svg = $('<div>').append(svg.clone()).html();
//alert(svg);
$(this).html(svg);