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>

任何见解都会受到极大关注。

干杯，

标记

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固定在或高度。然后你可以做类似下面的事情，它的设计固定高度为100px。

＆＃13;

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

＆＃13;

无论svg的大小如何，都要在每个角落放置一个元素

2 个答案: