如何在 SVG 中制作响应式平行四边形并保持其角度？答案

【问题标题】：How can I make a responsive parallelogram in SVG keep it's angles?如何在 SVG 中制作响应式平行四边形并保持其角度？
【发布时间】：2021-02-01 05:17:03
【问题描述】：

让我们从我想要达到的最终结果开始：

平行四边形的长度和高度可以相互独立变化，但边角不变。

说完这些，让我们谈谈为什么以及我已经做了什么。

我对 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。

但是，很明显，当您希望左侧有一个并且右侧有一个时，这种方法不起作用！

我的第一次尝试是一个相当愚蠢的 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>

我该怎么做才能使左右角都保持在适当的位置，并保持适当的角度（因此它们必须保持纵横比）而中间扩大（不需要保持纵横比）？

【问题讨论】：

嗨！您找到解决问题的方法了吗？
@Ivar 否。对于我的个人用例，我最终使用 CSS 来倾斜 div，然后使用我未倾斜的内部跨度。似乎没有特定于 SVG 的方法。虽然现在我已经说过了，并且 CSS 在 SVG 中是有效的。也许你可以在 SVG 中倾斜？
感谢分享！另外，在阅读了更多内容后，我找到了 svg transform attribute 。这可用于进行倾斜变换。

标签： html xml svg responsive-design

【解决方案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/

【讨论】：