パスタグのd属性の値をパーセントで指定する

Question

pathタグのd属性のパーセント値はどのように使用できますか？例えば

：

<path stroke-width="4" d="M1% 10% l100% 0" /> 

は動作しません。

svgサイズの変更時にsvgタグの要素を再利用したいので、絶対値（パーセンテージ）を探しています。

ありがとうございます。

Answer 1

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>