您可以重复引用定义。虽然这不是无限递归,但它比其他答案/评论中引用的嵌套方法简单得多。
请参阅我发现的 Dudley Storey 的这些示例(示例 1、示例 2):
svg {
display: block;
width: 40%;
margin: 0 auto;
}
polygon, line {
fill: none; stroke: #32679D;
stroke-width: 5px;
vector-effect: non-scaling-stroke;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 750">
<defs>
<g id="hex" transform="rotate(30 375 375)">
<polygon points="229.3,627.5 83.6,375.5 229.3,123.5 520.7,123.5 666.4,375.5 520.7,627.5" />
<line x1="229.3" y1="123.5" x2="520.7" y2="627.5"/>
<line x1="666" y1="375.5" x2="84" y2="375.5"/>
<line x1="520.7" y1="123.5" x2="229.3" y2="627.5"/>
</g>
</defs>
<use xlink:href="#hex" />
<use xlink:href="#hex" transform="translate(470.75, 172) scale(.25)" />
<use xlink:href="#hex" transform="translate(470.75, 390.5) scale(.25)" />
<use xlink:href="#hex" transform="translate(91.75, 172) scale(.25)" />
<use xlink:href="#hex" transform="translate(91.75, 390.5) scale(.25)" />
<use xlink:href="#hex" transform="translate(155, 281.25) scale(.25)" />
<use xlink:href="#hex" transform="translate(407.5, 281.25) scale(.25)" />
<use xlink:href="#hex" transform="translate(281.25, 63.5) scale(.25)" />
<use xlink:href="#hex" transform="translate(281.25, 500) scale(.25)" />
<use xlink:href="#hex" transform="translate(344.5, 172) scale(.25)" />
<use xlink:href="#hex" transform="translate(218, 172) scale(.25)" />
<use xlink:href="#hex" transform="translate(344.5, 390.5) scale(.25)" />
<use xlink:href="#hex" transform="translate(218, 390.5) scale(.25)" />
</svg>
嵌套可能会变得更复杂:
body {
margin: 0;
min-height: 100vh;
background: #fff;
}
svg {
display: block;
width: 100%;
min-height: 100vh;
}
polygon {
fill: none;
stroke: rgba(0,0,0,0.3);
stroke-width: 3;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="tesselation" patternUnits="userSpaceOnUse" width="562.6" height="325" patternTransform="scale(.75)">
<g id="group">
<polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
<g id="basetwist" >
<use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />
<g id="diamond">
<use xlink:href="#base" transform="translate(188.85, 108) scale(.33)" id="base_level2" />
<g id="sidediamond">
<use xlink:href="#base_level1" transform="translate(188.85, 108) scale(.33)" id="base_level3" />
<use xlink:href="#base_level2" transform="translate(188.85, 108) scale(.33)" id="base_level4" />
<use xlink:href="#base_level3" transform="translate(188.85, 108) scale(.33)" />
<use xlink:href="#base_level4" transform="translate(188.85, 108) scale(.33)" />
</g>
</g>
<use xlink:href="#sidediamond" transform="translate(62,0)" />
<use xlink:href="#sidediamond" transform="translate(-62,0)" />
<use xlink:href="#diamond" transform="translate(0,-107)" />
<use xlink:href="#diamond" transform="translate(0, 107)" />
</g>
</g>
<g id="tesselation">
<use xlink:href="#group" />
<use xlink:href="#group" transform="rotate(60 281 0)" />
<use xlink:href="#group" transform="rotate(-60 281 0)" />
<use xlink:href="#group" transform="rotate(-60 281 325)" />
<use xlink:href="#group" transform="rotate(60 281 325)" />
<g id="vert">
<use xlink:href="#group" transform="translate(-282, -162)" />
<use xlink:href="#group" transform="translate(-282, 162)" />
</g>
<use xlink:href="#vert" transform="translate(564, 0)" />
</g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#tesselation)" />
</svg>
编辑:他有博客文章描述了他如何创建它们:
为了保护用户的隐私,图像文件必须是独立的。 IE。如果您从图像标签引用 SVG 文件,并且该 SVG 文件本身包含图像,则必须将图像数据指定为 data URL。
您可以使用数据 URL 将图像嵌套到您想要的深度,但这并不是真正的递归,因为您每次都必须提供完整的副本,并且您的数据 URL 会变得非常大。