使用 svg 可调整大小的带有粗糙边缘的框答案

【问题标题】：resizable box with rough edges using svg使用 svg 可调整大小的带有粗糙边缘的框
【发布时间】：2021-01-12 22:57:29
【问题描述】：

我正在做一个小项目，我需要在其中构建一个带有粗糙边缘的文本框。为此，我使用带有时髦边缘的 SVG - 有点像这个：https://ikedabarry.com/InkTex/wp-content/uploads/2012/07/Ink_039_6501.jpg（但作为 SVG）。

我想要实现的是，我将它作为背景添加到 DIV，并且它总是很好地填充到包含 DIV 的边缘，在所有方面，这样 DIV 在任何方面看起来都不是完全正方形的。无论盒子的大小（它会根据屏幕大小调整大小）。

这现在不起作用。

我们目前使用的：

background-image: url(above.svg);
background-size: cover;

这不起作用，因为只有一半边缘是粗糙的，而其他边缘延伸到可见区域之外。

我们也试过了：

background-size: 100% 100%;

但这不起作用，因为我最终使图像遵循其自然大小。

我现在不确定使用 JS/CSS 来完成这项工作的最佳解决方案是什么。

这是我认为的选项：

选项 1：写一些JS：

一个。监听 DIV 中的大小变化

b.为 SVG 添加宽度和高度

c。将背景图像设置为 100% 100%。

选项 2：

一个。使用 DIV 将图像添加为普通图像

b.将 DIV 设置为相对位置，将 IMAGE 设置为绝对位置

c。将图像的上/下/左/右设置为零。（它现在不起作用，因为它是 SVG - 不知道为什么）。

我觉得选项 2 是最好的，但我想知道我是否忽略了某些东西......

任何帮助表示赞赏。

更新：这是一个可运行的示例： https://jsfiddle.net/sunnsideup/er1xd0wg/15/

【问题讨论】：

我们可以考虑使用PNG
你能分享 svg 吗？
如果您可以创建一个 runnable 示例来说明您的 SVG 文本的外观，这将非常有帮助，这样我们就可以对其进行修改。现在只是猜测。
嗨@EmielZuurbier，我现在在下面添加了工作示例。

标签： javascript html css svg

【解决方案1】：

不妨试试这个：

background-size: 100vw 100vh;

我不确定，这是否可以解决您的问题，但它可以提供帮助

【讨论】：

感谢您的回复。不幸的是，这是行不通的，因为 DIV 的大小与视口的大小不同。
也许你可以使用选项2，但不要使用top/right/bottom/left，而是使用top/left/width/height。我不确定，但是当像这样使用 SVG 时，它可以有一些有线交互
我只是猜测，你应该分享一些例子，这样我们就知道它到底有什么问题
没有例子我可以告诉你，这永远不会成功。

【解决方案2】：

这是我们想出的：

https://jsfiddle.net/sunnsideup/er1xd0wg/15/

为纵向/横向 div 创建不同的 SVG，这样您就不会因为过度拉伸而得到看起来笔直的 BG 图像。
从 svg 中删除高度和宽度，像这样添加具有实际宽度和高度的视图框：

viewBox="0 0 WIDTH HEIGHT"

添加到 svg：

preserveAspectRatio="none"

将 SVG 转换为 CSS 背景： https://yoksel.github.io/url-encoder/
添加以下css：

  background-image: url("data:image/svg+xml,.... SVG GOES HERE ...  ");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;

【讨论】：