1

Raphael.js を使用して、Javascript (実際には Coffeescript) から SVG 描画を生成しています。

ただし、最初の <svg> タグ内にネストされた 2 番目の <svg> タグ内に配置することにより、自動的にスケーリングされたサブドローイングを含めることができるようにしたいと考えています。残念ながら、四角形やパスなどを追加できる Raphael Paper オブジェクトには、svg を追加するオプションがありません。

次のコードを使用して、タグを JavaScript の DOM に直接追加しようとしました。

res = document.createElement("svg")
res.setAttribute("x",x)
res.setAttribute("y",y)
res.setAttribute("width",width)
res.setAttribute("height",height)
res.setAttribute("viewBox","0 0 100 100")
res.innerHTML = someInnerSVG
@paper.canvas.appendChild(res)

これにより、DOM が期待どおりに更新され、新しい SVG タグがメインの外側の SVG の子として追加されるようです。ただし、この内部は実際には画面に表示されません。(私の内側の SVG パスは 0 0 100 100 内でスケーリングされるため、viewBox 内にあります。)

Raphael によって作成された、外側の SVG の残りの描画が表示されます。しかし、内側のものは何もありません。

私がしようとしていることが可能であるべきですか？私が間違っていることは何か分かりますか？

4

1 に答える 1

0

これらのサブ要素を Raphael セットに配置する必要があります。そこから、変換をセットに適用できるようになります。セットを変換するには、メソッドを呼び出して属性transform()を使用します。s

set.transform('s[sx],[sy]');

は水平sx方向のスケール量、syは垂直方向のスケール量です。数字を挿入するときは括弧を外してください。

こちらのドキュメントを参照してください: http://raphaeljs.com/reference.html#Element.transform セットは疑似要素であるため、要素のメソッドはセットに適用されます。

于 2013-02-14T21:58:48.737 に答える