Поместите элемент на каждый угол независимо от размера svg

Question

Я пытаюсь создать SVG, который имеет элемент в каждом углу. Я хочу, чтобы svg был масштабируемым, в то время как угловые элементы сохраняют свой размер и соотношение сторон ... при этом придерживаются углов.

Я чувствую, что с большим количеством javascript fiddling это можно сделать. Но я действительно чувствую, что это можно сделать с помощью некоторого умного 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.

Cheers,

Марк

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 фиксируется либо с высотой, либо с высотой. Затем вы можете сделать что-то вроде следующего, которое предназначено для фиксированной высоты 100 пикселей.

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