SVGのサイズに関係なく、各コーナーに要素を配置します

Question

各コーナーに要素を持つSVGを作成しようとしています。私は、角の要素は、とのアスペクト比 ...を維持しながら、svgをスケーラブルにしたい、コーナーにこだわっています。

私は多くのjavascriptを手にしているように感じます。これは可能です。しかし、私は本当にこれがいくつかの巧妙なCSSとSVGの実際の動作をよく理解していると思うのです。

これは私がそれが動作すると期待している例です：Demo Fiddle。これはちょうどhtmlとcssです。

div { width:40px; height:40px; position:absolute; 
    &:nth-of-type(1) { top:0; left:0; background-color:red;} 
    &:nth-of-type(2) { top:0; right:0; background-color:blue;} 
    &:nth-of-type(3) { bottom:0; left:0; background-color:green;} 
    &:nth-of-type(4) { bottom:0; right:0; background-color:yellow;} 
} 

私は最終的にここに来る前に着い場所です：Fiddle

<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve" preserveAspectRatio="none"> 

    <svg id="top-left" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet"> 
    <rect width="20" height="20" fill="red" style="y:0; x:0"/> 
    </svg> 

    <svg id="top-right" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMin meet"> 
    <rect width="20" height="20" fill="blue" style="y:0; x:calc(100% - 20px)"/> 
    </svg> 

    <svg id="bottom-left" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet"> 
    <rect width="20" height="20" fill="green" style="y:calc(100% - 20px); x:0"/> 
    </svg> 

    <svg id="bottom-right" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMax meet"> 
    <rect width="20" height="20" fill="yellow" style="y:calc(100% - 20px); x:calc(100% - 20px)"/> 
    </svg> 

</svg> 

任意の洞察力が大幅にappriciatedされるだろう。

乾杯、

マーク

Answer 1

コーナー要素が対称である場合には（左から右、上から下）あなたは、右を置く（または下）の要素のちょっとしたトリックを使用することができますx = -100％（またはy = -100％）で、sx = -1（またはsy = -1）のスケール変換を適用します。

<svg x="0%" y="0%" width="100%" height="100%" style="border: 1px solid black;"> 
 
    <rect id="top-left" x="0%" y="0%" width="20" height="20" fill="red"/> 
 
    <rect id="top-right" x="-100%" y="0%" width="20" height="20" fill="green" transform="scale(-1,1)"/> 
 
    <rect id="bottom-left" x="0%" y="-100%" width="20" height="20" fill="blue" transform="scale(1,-1)"/> 
 
    <rect id="bottom-right" x="-100%" y="-100%" width="20" height="20" fill="yellow" transform="scale(-1,-1)"/> 
 
</svg>

コーナー要素が対称であるとき、このトリックは、特殊なケースのために働くことに注意してください。

Answer 2

あなたが知っているのであれば、一方向の縮尺を変更する必要があるだけです。言い換えれば、SVGはwithまたはheightのいずれかで固定されています。次に、100pxの固定高さ向けに設計された次のようなことができます。

<svg width="100%" height="100" preserveAspectRatio="none"> 
 

 
    <svg id="top-left" width="100%" height="100%" viewBox="0 0 20 100" preserveAspectRatio="xMinYMin meet"> 
 
    <rect width="20" height="20" fill="red"/> 
 
    </svg> 
 

 
    <svg id="top-right" width="100%" height="100%" viewBox="0 0 20 100" preserveAspectRatio="xMaxYMin meet"> 
 
    <rect width="20" height="20" fill="blue"/> 
 
    </svg> 
 

 
    <svg id="bottom-right" width="100%" height="100%" viewBox="0 0 20 100" preserveAspectRatio="xMaxYMax meet"> 
 
    <rect y="80" width="20" height="20" fill="green"/> 
 
    </svg> 
 

 
    <svg id="bottom-left" width="100%" height="100%" viewBox="0 0 20 100" preserveAspectRatio="xMinYMax meet"> 
 
    <rect y="80" width="20" height="20" fill="yellow"/> 
 
    </svg> 
 

 
</svg>