svgの複数のpreserveAspectRatio？

Question

私はレイアウト内の特定のスペースを埋めるようにしています。だからpreserveAspectRatio="none"は良いアプローチのようです。

しかし、svg内には、私が行うマスクがありますではなく、ストレッチ/ワープしたいです。むしろ、幅の100％を占め、比率に応じて高さのスケーリングを行う必要があります。 2つの画像は、親SVGが風景または肖像画のいずれかにあるときのマスクの動作を示しています。 （注：画像の灰色は、<svg>の残りの部分です）、

マスクには独自のaspectRatio設定がありますか？これを達成するより良い方法はありますか？または、それは可能ですか？

`` `

<!-- this should scale according to its bounding parent --> 
<svg class="fix" viewbox="0 0 2880 1620" preserveAspectRatio="none..?"> 

    <!-- this should scale according to some intrinsic ratio --> 
    <mask id="mask" 
     maskUnits="userSpaceOnUse" 
     maskContentUnits="userSpaceOnUse"> 
    <rect fill="white" x="0" y="0" width="2880" height="1620" /> 
    <path fill="black" d="M57.59,60h409c344.17,.... ...."/> 
    </mask> 

    <rect mask="url(#mask)" x="0" y="0" width="100%" height="100%" /> 

</svg> 

` ``

編集：（それは、追加の位置決めのオプションを持っているとして）だけではなく、maskのmask-imageが可能と思われる使用して、これはありませんsvg要素では動作しないようです。

Answer 1

preserveAspectRatio="none"を使用して、矩形とマスクにページを塗りつぶす必要はありません。 <rect>と<mask>をSVGの境界を越えて全方向に拡張するだけです。ルート<svg>の要素はデフォルトでoverflow: visibleなので、拡張されたrectはSVGの親コンテナを塗りつぶします。

<rect mask="url(#mask)" x="-1000%" y="-1000%" width="3000%" height="3000%" /> 

ここで1000％を使用しましたが、それ以上（10x以上）が必要な場合は調整できます。

標準のデフォルトSVG preserveAspectRatioを使用していることに注意してください。だから我々はまだSVGの自動センタリングとスケーリングを得る。あなたの質問へ

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<svg viewbox="0 0 2880 1620"> 
 

 
    <!-- this should scale according to some intrinsic ratio --> 
 
    <mask id="mask" 
 
     maskUnits="userSpaceOnUse" 
 
     maskContentUnits="userSpaceOnUse" 
 
     x="-1000%" y="-1000%" width="3000%" height="3000%"> 
 
    <rect fill="white" x="-1000%" y="-1000%" width="3000%" height="3000%" /> 
 
    <circle cx="1440" cy="810" r="400" fill="black"/> 
 
    </mask> 
 

 
    <rect mask="url(#mask)" x="-1000%" y="-1000%" width="3000%" height="3000%" /> 
 

 
</svg>

Demo in fiddle format