Question

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

我只是想将svg-image设置为背景并重复它。我无法弄清楚如何应用背景重复等。我还希望能够使用css和/或JS为svg的边框设置样式，从div的左侧到div的右侧每分钟更改一次边框颜色。我唯一知道的是：svg border被称为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标头和命名空间），并将其用作background-image。您提供的代码没有SVG作为背景，它将SVG作为主文档中的元素。在这种情况下，背景重复属性对SVG的影响不会比<img>元素更多。

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

在这些情况中的任何一种情况下，都不能从左到右逐渐改变每个图块的样式属性。 background-repeat和<pattern>都可以通过精确重复来实现图形的有效重复，因此您无法在与其他图块不同的时间更改一个图块。

如果效果对您非常重要，那么最有可能取得成功的方法是

在SVG中制作整个重复模式
创建一个线性渐变，以userSpaceOnUse单位定义颜色过渡，并将其用作描边属性
使用SMIL动画（在IE中不起作用）或Javascript（更多工作和更多CPU耗尽）为渐变设置动画

但是，您必须直接创建重复模式，或者可能使用<use>元素（我尚未测试），而不是<pattern>。或者，您可以创建两个图案，一个用于填充，一个用于笔划（白色），并使用笔触图案的结果作为完全使用渐变填充的矩形的蒙版。

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

造型与css重复svg背景

1 个答案: