CSS を介して 100% 幅のドキュメントに SVG 要素があります。これは、svg 要素のサイズを変更するだけです。パスのサイズは変更されません。ここに私のパスコードがあります:
<path id="quadcurveABC" d="M 0 300 q 300 0 500 -100 l 0 100 z" stroke="black" stroke-width="2" fill="black" />
の x コンポーネントをM画面の左側に並べる必要がありますが、画面の右側に並べるには 500 も必要q 300 0 500 -100です。どうすればこれを達成できますか?
表示するコンテンツを指定するviewBox属性をSVG 要素に与えます。
<svg … viewBox="0 200 500 100">
つまり、「この画像のコンテンツは、幅 500 単位、高さ 100 単位で、0x,200y から始まります。必ず表示されたままにしてください」ということです。
実際に見られる:
CSS で指定された縦横比が viewBox の縦横比と一致しない場合に、画像のトリミング、スケーリング、配置をさらに制御する方法の詳細については、preserveAspectRatio属性についてお読みください。
svg ルート要素に、囲んでいる html 要素と同じサイズのビューポートがあることを確認してください。