SVGグループをビューポートのパーセンテージで翻訳する方法

Question

私は<g>（グループ）内にあるSVG <rect>を持っています。私はそれをスケールし、ビューポートのパーセンテージで変換したいと思います。 svgのほとんどすべては、ばかげた数のオプションを通してユニットの指定を可能にします。例えばpx、em、％、ex、pt、pc、...しかし、翻訳で指定された数値はピクセルだけであるようです。

私が戻って翻訳のピクセル値を再計算する必要がある場合、私のsvgは解像度に依存するということです。それから私、あなたと誰もがパラドックスに吸い込まれるでしょう。なぜ私は少し心配しているのか分かります。

<svg> 
    <g transform="scale(1, 1) translate(0, 0)"> 
    <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
</svg> 

http://jsbin.com/ubeqot/1/edit

Answer 1

スティック内<svg>要素で<g>素子及びそれを翻訳するために、内側<svg>要素にパーセント値とxとy属性を追加します。

<svg> 
    <svg x="10%" y="20%"> 
    <g transform="scale(1, 1)"> 
     <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
    </svg> 
</svg> 

あなたはスケールが最初に適用したい場合は、代わりに<g>内<svg>要素を入れてしまうでしょう。