Question

让我们从最终结果开始，我试图实现：

平行四边形的长度和高度可以彼此独立地改变，但是边的角度不会改变。

在此之后，让我们谈谈为什么以及我已经做过的事情。

我对SVG缺乏经验，但我已经知道CSS不足以做我想做的事情，即制作看起来像上图的响应式按钮 - 除了有时候左侧或右侧是直的。

最初，对于那些人，我设计了一个可以用作背景的大范围SVG，然后按比例放大并对齐到左边或右边（作为背景），以便多余部分被截断但是因此宽高比不会改变。出于某种原因，我没有花时间调试，但这不符合设计。

然后，我学习了一些关于SVG的知识并了解了preserveAspectRatio。我使用这个漂亮的功能来制作自己响应的SVG：

<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 200 50" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
    <rect x="22" height="50" width="178" style="fill:green;">
    </rect>
    <svg id="left-corner" viewBox="0 0 27 50" preserveAspectRatio="xMinYMin meet">
        <polygon points="22,0 27,0 27,50 0,50" style="fill:green;"/>
    </svg>
</svg>

和

<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 200 50" preserveAspectRatio="xMaxYMin slice" xmlns="http://www.w3.org/2000/svg">
    <rect height="50" width="178" style="fill:green;">
    </rect>
    <svg id="right-corner" viewBox="0 0 27 50" preserveAspectRatio="xMaxYMin meet">
        <polygon points="0,0 27,0 5,50 0,50" style="fill:green;"/>
    </svg>
</svg>

这两个非常容易保持构成侧面（相遇）的三角形的纵横比，同时迫使矩形扩展以填充剩余空间。完善！当三角形在右边时使用xMaxYMin，当三角形在左边时使用xMinYMin。

但是，很明显，当你想要左边的那个 AND 一个时，这个方法不起作用！

我的第一次尝试是对xMidYMin的相当愚蠢的尝试，它将视口放在矩形的中心，但随着高度的扩展，边缘向外进一步向外，三角形从未显示出来 - 而是呈现一个巨大的矩形！

我的下一次尝试非常接近，通过删除我实现几乎我想要的效果的矩形！

<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
    <svg id="left-corner" viewBox="0 0 27 50" preserveAspectRatio="xMinYMin meet">
        <polygon points="22,0 27,0 27,50 0,50" style="fill:green;"/>
    </svg>
    <svg id="right-corner" viewBox="0 0 27 50" preserveAspectRatio="xMaxYMin meet">
        <polygon points="0,0 27,0 5,50 0,50" style="fill:green;"/>
    </svg>
</svg>

这里的问题是，虽然它确实上下扩展，但它得到的时间越长，它从末端开始缩进越多！

我还尝试将开始和结束剪切作为单独的SVG嵌入到一个宽度为50％的SVG中（每边一个），但是当preserveAspectRatio关闭时，嵌入的SVG被拉伸而不是调整大小。主图像，它不会扩展，以便在我需要的时候填充空间。

<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <svg id="start-cut" viewBox="0 0 200 50" width="50%" height="100%" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
        <rect x="22" height="50" width="178" style="fill:green;">
        </rect>
        <svg id="left-corner" viewBox="0 0 27 50" preserveAspectRatio="xMinYMin meet">
            <polygon points="22,0 27,0 27,50 0,50" style="fill:green;"/>
        </svg>
    </svg>
    <svg id="end-cut" viewBox="0 0 200 50" width="50%" x="50%" preserveAspectRatio="xMaxYMin slice" xmlns="http://www.w3.org/2000/svg">
        <rect height="50" width="178" style="fill:green;">
        </rect>
        <svg id="right-corner" viewBox="0 0 27 50" preserveAspectRatio="xMaxYMin meet">
            <polygon points="0,0 27,0 5,50 0,50" style="fill:green;"/>
        </svg>
    </svg>
</svg>

我可以做些什么来保持左右角落在适当的位置，以适当的角度（因此它们必须保持其纵横比）而中间展开（不需要保持它的长宽比））？

Answer 1

这是响应式 SVG 平行四边形的代码：

<svg id="main-box" viewBox="0 0 2000 500" preserveAspectRatio="none" 
  xmlns="http://www.w3.org/2000/svg">
 <style>
  rect {
    fill:black;
  }
  </style>
  <rect x="190" y="0" width="90%" height="100%"  transform="skewX(-20)" />
</svg>

注意使用 skewX 变换以及 rect 和 width 值来赋予 SVG 形状。它工作正常。但是，我遇到的唯一问题是尝试将其用作 body 标签上的背景图像时。 Firefox 中的大小不正确存在问题。研究这个问题，它似乎是由对规范的不同解释造成的，而不是一个无意的错误。

你可以在我创建的一个副项目中看到这个平行四边形的使用：https://thisisa.lockdownchemz.link/

如何在SVG中制作响应式平行四边形，保持它的角度？

1 个答案: