問題

SVGを使用して、ユーザーインタラクションで多くを変更できるインタラクティブな図を描画しています。より正確には、ユーザーがエンティティを追加すると、任意の方向(負の座標を含む)で展開できます。

私はオブジェクトを含むことができる無限の計画のような私のSVGオブジェクトについて考えたいと思います。そして、私はこのオブジェクトの位置と変換を使用して、ユーザーが現在画面に表示されている部分をズームして移動できるようにします。 enter image description here 問題は、ナイーブの実装で私はこれを得ることです: enter image description here

このSVGコードで問題を再現するために最小限の jsFiddle を作成しました

 <svg>
    <rect x="-10" y="35" width="40" height="40"
    style="stroke: black; fill: none;"/>
    <!-- roof -->
    <polyline points="-10 35, 10 7.68, 30 35" 
    style="stroke:black; fill: none;"/>
    <!-- door -->
    <polyline points="10 75, 10 55, 20 55, 20 75"
    style="stroke:black; fill: none;"/>
</svg>
 

このCSSコード

 svg {
    border: 1px solid blue;
    position: absolute; top: 30px; left: 30px;
}
 

私はできることを知っています:動的にSVGのviewBoxを変更し、svg要素にオフセットを適用しますが、それはVMLから移植された古いコードであり、座標システムの変換を行う多くの相互作用があるため、非常に苦痛なリファクタリングです。だから私は座標システムを変更することを含まない解決策を望みます。

編集:私は初めてそれを言及するのを忘れましたが、"overflow: visible"は期待される結果を生成しません:子供はまだクリップされます。

Q:ブラウザにSVG要素の境界の外に描画させる方法はありますか?

注:クロムのみのソリューションは、標準的なソリューションを使用することを好む場合でも、私にとっては問題ありません。

  ベストアンサー

  同じタグがついた質問を見る

javascripthtmlgoogle-chromesvg