你能决定 svg 将拉伸到哪里以保留图像部分的比例吗？

Question

假设我想制作一个 svg，它可以拉伸为以下两个盒子中的任何一个：

我正在尝试使用此 SVG 作为 HTML/CSS 中的图像背景。

请注意，两个框中的左下角具有相同的角度，但第二个框中的角度更长。我在插画中做了这个，改变了节点本身。如果我制作一个自定义 SVG，它可以在拉伸文件另一侧的同时保持左下角完整，是否可以使用任何属性？

我用clip-path实现了类似的效果：polygon() 和 calc，它允许使用 % 和 px 单位，这意味着角可以是 30px 插入，但右下角是 100% 100%。这个解决方案的问题是多边形不允许曲线，我需要稍后添加一些。

Answer 1

对于您描述的简单情况，最好的解决方案是切片边框图像。SVG 是通过此处的数据 url 设置的，但您也可以使用外部文件。图像被切成九个部分，角保持其大小，中间部分根据需要拉伸所包含的图像。

你说你稍后想要添加曲线。如果这些曲线位于被拉伸的中间切片内，它们就会扭曲。该解决方案取决于避免这种情况。如果不能，我不知道有什么方法可以解决在 JS 中动态计算路径数据的问题。

div 可调整大小，拖动右下角可移动它。

我坦率地承认，我发现 的相互作用border-width以及border-image-width图像的大小很难理解。下面的值是相应的实验结果。

div {
    width:300px;
    height:150px;
    position:relative;
    overflow: hidden;
    resize:both;
    background-color:#cef;
    background-clip: content-box;
    
    border-style: solid;
    border-width: 10px;
    border-image-source: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="M1,1V30L10,39H39V1Z" /></svg>');
    border-image-slice: 30%;
    border-image-width: 60px;
    border-image-repeat: stretch; 
}

<div>