时间戳

首页 > 解决方案 > 如何在不使用模式的情况下重复 SVG？

html - 如何在不使用模式的情况下重复 SVG？

问题描述

我有一个svg，我想根据设备的宽度重复这个 svg。我不想在pattern这里使用。

<svg width="54" height="124" class="absolute left-0 bottom-0 right-0 mx-auto -z-10" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M1 22h2v-22h18v22h2v2h-22v-2zm7-3v4h3v-4h-3zm5 0v4h3v-4h-3zm-6-5h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2z"/></svg>

标签： htmlcsssvg

解决方案

您可以使用 CSS 背景重复功能。

这是一个简单的片段来演示。它重复图像，将其宽度设置为“自然”宽度（您当然可以根据需要设置其尺寸），并且根据容器的宽度在水平方向上重复多次。

<style>
body {
  width: 100vw;
  height: 100vh;
}
.container {
  width: 100%;
  height: 100%;
  background-image: url(https://ahweb.org.uk/temp.svg);
  background-size: 54px auto;
  background-repeat: repeat no-repeat;
  position: relative;
}
</style>
<body>
<div class="container">
</div>
</body>

为避免需要请求文件，您可以将 SVG 转换为内联数据，使其全部包含在样式表中。

更新：这个片段可以做到这一点 - 使用数据转换在线工具。鉴于根据 api 的结果更改颜色的额外要求，您将需要您的 Javascript 使用从您的 api 获得的填充颜色设置正确的背景图像。

<style>
body {
  background-image: url("data:image/svg+xml, %3Csvg id='svg' fill='red' width='54' height='124' class='absolute left-0 bottom-0 right-0 mx-auto -z-10' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath id='path' d='M1 22h2v-22h18v22h2v2h-22v-2zm7-3v4h3v-4h-3zm5 0v4h3v-4h-3zm-6-5h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2z'/%3E%3C/svg%3E");
}
</style>
<body>
</body>

推荐阅读