私は SVG を使用して、ユーザーの操作によって大きく変化するインタラクティブな図を描画しています。より正確には、ユーザーがエンティティを追加すると、任意の方向 (負の座標を含む) に拡張できます。
私の SVG オブジェクトは、どこにいても描画されるオブジェクトを含むことができる無限の計画のように考えたいと思います。そして、このオブジェクトの位置と変換を使用して、ユーザーが現在画面に表示されている部分をズームおよび移動できるようにします。
問題は、単純な実装では次のようになることです。
この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 要素の境界外にブラウザを描画させる方法はありますか?
注：標準的なソリューションを使用したい場合でも、クロムのみのソリューションで問題ありません。