svg boyutu ne olursa olsun her köşede bir öğe konumlandırın

Question

Her köşede bir öğeye sahip bir SVG oluşturmaya çalışıyorum. Svg'nin ölçeklenebilir olmasını istiyorum, köşe elemanları , köşelere yapışırken ve görünüm oranını korur.

Birçok javascript ile uğraşmak gibi hissediyorum, bu yapılabilirdi. Ama bunun gerçekten akıllı bir css ile yapılabileceğini ve SVG'nin gerçekte nasıl çalıştığını iyi anladığımı hissediyorum.

Bu, çalışmasını beklediğim bir örnektir: Demo Fiddle. Bu sadece html ve css. Sonunda buraya gelmeden önce var nerede

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;} 
} 

budur: 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> 

Herhangi fikir büyük appriciated olacaktır.

Alkış,

Mark

Answer 1

köşe elemanları simetrik ise (soldan sağa ve yukarıdan alt) o zaman hakkını yerleştirerek (veya alt) elemanları biraz hile kullanabilirsiniz x = -100% (veya y = -100%) ve sx = -1 (veya sy = -1) ile bir ölçek dönüşümü uygular.

<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>

köşe elemanları simetrik olduğunda bu hile sadece özel durum için çalıştığını

Not.

Answer 2

Sadece bir yönde ölçekleme yapmanız gerektiğini biliyorsunuz. Diğer bir deyişle, SVG ya ya da yükseklik ile sabitlenir. Sonra 100px sabit yükseklik için tasarlanmış aşağıdaki gibi bir şey yapabilirsiniz.

<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>