css - 使用 css 设计重复的 svg 背景

Question

现在我已经浏览了大约 4 个小时的互联网，但找不到适合我的任务的任何解决方案。

我只是想将 svg-image 设置为背景并重复它。我不知道如何应用背景重复等。我还希望能够使用 css 和/或 JS 设置 svg 边框的样式，每分钟将边框颜色从 div 的左侧更改为 div 的右侧。我唯一知道的是:svg 边框称为 stroke 但我不知道如何使用此信息。

这是我到目前为止得到的:

<div id="test">

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

        <path d="M69.527,2H29.971L2,29.971v39.558L29.971,97.5h39.558L97.5,69.527V29.972L69.527,2z M95.625,68.898L68.898,95.625H31.101  L4.375,68.898V31.516v-0.414L31.102,4.375h37.796l26.728,26.727L95.625,68.898L95.625,68.898z"/>
        <path d="M68.07,6.375H31.93L6.375,31.93v36.142L31.93,93.626h36.142L93.625,68.07V31.93L68.07,6.375z"/>

    </svg>

</div>

和 CSS

body {
    background: rgba(55, 55, 55, 1);
}

#test {
    width: 70%;
    height: 150px;
    margin: 0 auto;
    border: 2px solid white;
}

CodePen

Answer 1

如果你想使用background-repeat要平铺您的 SVG，您需要将 SVG 保存在一个单独的文件中(具有适当的 SVG header 和命名空间)并将其用作 background-image .您提供的代码没有 SVG 作为背景，而是将 SVG 作为主文档中的一个元素。在这种情况下，背景重复属性对 SVG 的影响并不比对 <img> 的影响更大。元素。

作为替代方案(如果您想避免单独的文件)，您可以让 SVG 填充整个 div，然后使用 SVG <pattern>平铺图形。我相信您可以通过搜索“SVG 模式”找到语法示例。

在这两种情况下，不可能让每个图 block 的样式属性从左到右逐渐变化。两者 background-repeat和 <pattern>通过准确地重复图形来实现图形的高效重复，因此您不能在与其他图 block 不同的时间更改一个图 block 。

如果效果对您来说真的很重要，那么最有可能成功的方法是

1. 在 SVG 中制作整个重复图案
2. 创建线性渐变，在 userSpaceOnUse 中定义颜色过渡的单位，并将其用作笔触属性
3. 使用 SMIL 动画(在 IE 中不起作用)或 Javascript(更多工作和更多 CPU 消耗)为渐变设置动画

但是，您必须直接创建重复模式，或者可能使用 <use>元素(我没有测试过)，而不是 <pattern> .或者，您可以创建两种图案，一种用于填充，一种用于描边(白色)，然后将描边图案的结果用作完全由渐变填充的矩形的 mask 。

这些都不是我认为的初学者 SVG 示例，但如果你让它工作，你会学到很多关于 SVG 的知识。