0
path
タグのd
属性のパーセント値はどのように使用できますか?例えばパスタグのd属性の値をパーセントで指定する
:
<path stroke-width="4" d="M1% 10% l100% 0" />
は動作しません。
svgサイズの変更時にsvgタグの要素を再利用したいので、絶対値(パーセンテージ)を探しています。
ありがとうございます。
path
タグのd
属性のパーセント値はどのように使用できますか?例えばパスタグのd属性の値をパーセントで指定する
:
<path stroke-width="4" d="M1% 10% l100% 0" />
は動作しません。
svgサイズの変更時にsvgタグの要素を再利用したいので、絶対値(パーセンテージ)を探しています。
ありがとうございます。
SVGパスデータは無次元数、期間のみを許可します。
パスのサイズを変更する場合は、transform
属性を使用するか、新しいビューポートを確立します。たとえば、あなたがあなたの最も外側の<svg>
内部<svg>
要素を使用してパスをラップすることができます:
<svg ...>
<svg viewBox="0 0 100 100" x="0" y="10%" width="100%" height="100%">
<path stroke-width="4" d="M1 10 l100 0" />
</svg>
</svg>
、あなたがパスは、絶対値として座標を定義します。内側の<svg>
は、viewBox
を定義して、パスが必要な量になるようにします。 x
,y
、width
およびheight
属性を使用して、相対的なサイジングと位置決めが可能です。
あなたは同じ要素を複数回再利用する場合は、あなたが<symbol>
と(自分自身をレンダリングされませんテンプレートを)同じことを行うことができますし、それを参照する<use>
要素:
<svg ...>
<symbol id="myPath" viewBox="0 0 100 100">
<path stroke-width="4" d="M1 10 l100 0" />
</symbol>
<!-- with relative sizes -->
<use xlink:href="#myPath" width="100%" height="100%" />
<!-- with absolute sizes -->
<use xlink:href="#myPath" width="200" height="160" />
<!-- using transforms -->
<use xlink:href="#myPath" transform="translate(50, 0) scale(3.5)" />
</svg>
はどうもありがとうございました。それは働いて、私はポイントを得た.. –