私のHTMLコードにはSVGオブジェクト(<svg>
)があり、座標の0,0は要素の左端と最上部にあります。どのように私のコードに他の変更を行うことなく、0,0を要素の左端と最下位にすることができますか?SVG要素の属性/スタイルのみを変更しますか?CHANGE 0,0 from SVG
CODE:
<svg viewBox="0 0 15000 15000">...[HERE COMES THE VECTOR CONTENT]...</svg>
私のHTMLコードにはSVGオブジェクト(<svg>
)があり、座標の0,0は要素の左端と最上部にあります。どのように私のコードに他の変更を行うことなく、0,0を要素の左端と最下位にすることができますか?SVG要素の属性/スタイルのみを変更しますか?CHANGE 0,0 from SVG
CODE:
<svg viewBox="0 0 15000 15000">...[HERE COMES THE VECTOR CONTENT]...</svg>
サラウンド適用transform
を持つグループを使用してSVGの内容。変換は、Y方向に-1のスケール(垂直方向に反転する)で、平行移動して反転したコンテンツを画面上に戻す必要があります。
しかし、Robertが言ったように、テキストや画像のような要素は逆さまになることに注意してください。したがって、これらの要素を使用する必要がある場合は、それらを適切な方法でバックアップする必要があります。
<svg viewBox="0 0 400 300">
<g transform="translate(0,300) scale(1,-1)">
<rect width="100%" height="100%" fill="#f8f8ff"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="red" stroke-width="5"/>
</g>
</svg>
あなたのコードは素晴らしいですが、要素の座標は同じままです。私はグラフィックスを変更するJSを使用してこれらの座標にアクセスしているとフリッピーはこれを解決しません。原点を変更することが可能であればはるかに簡単です。いずれにせよ、誰も答えなかったので、私はあなたの答えを受け入れます。ありがとうございますPaul – Samul
私はあなたが何を意味するか分かりません。 '
あなたのコードを投稿してください – LGSon
あなたは変換でしたが、あなたはそれが逆さまに表示される任意のテキストを持っている場合。要するに、あなたはおそらく既存の座標系にぴったりだということです。 –