无论 svg 的大小如何，都在每个角上放置一个元素 [英] Position an element on each corner no matter the size of the svg

问题描述

我正在尝试创建一个在每个角落都有一个元素的 SVG.我希望 svg 是可缩放的，而角落元素保持它们的大小和纵横比...同时坚持角落.

I'm trying to create an SVG that has an element in each corner. I want the svg to be scaleable, whilst the corner elements retain their size and aspect ratio... whilst sticking to the corners.

我觉得有很多 javascript 摆弄，这是可以做到的.但我真的觉得这可以通过一些巧妙的 css 和对 SVG 实际工作方式的良好理解来完成.

I feel like with a lot of javascript fiddling, this could be done. But I really feel this could be done with some clever css and a good understanding of how SVG's actually work.

这是我希望它如何工作的一个例子:Demo Fiddle.这只是 html 和 css.

This is an example of how I'd expect it to work: Demo Fiddle. This is just html and 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>

任何见解都会非常有用.

Any insight would be greatly appriciated.

干杯，

标记

推荐答案

如果角元素是对称的(从左到右和从上到下)，那么你可以使用一个小技巧来放置右边(或底部)) x=-100%(或 y=-100%)的元素，并应用 sx=-1(或 sy=-1)的比例变换.

If the corner elements are symmetrical (left-to-right and top-to-bottom) then you could use a little trick of placing the right (or bottom) elements at x=-100% (or y=-100%) and applying a scale transform with sx=-1 (or 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>

请注意，此技巧仅适用于角元素对称的特殊情况.

Note that this trick only works for the special case when the corner elements are symmetrical.

这篇关于无论 svg 的大小如何，都在每个角上放置一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！