Svg 将模式转换为CSS？

在我的SVG图像中，我在

defs

部分有许多类似的模式：

        <pattern id="pat01" patternUnits="userSpaceOnUse" width="8px" height="8px"><image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAAAAADhZOFXAAAACXBIWXMAAAsSAAALEgHS3X78AAAAE0lEQVQImWP4vx8CGaD0fwayRADXsTfBHa7CGAAAAABJRU5ErkJggg==" x="0" y="0" width="8px" height="8px" /></pattern>

它们工作得很好，但是有没有办法将它们放入CSS样式表而不是SVG文档中

或者，我可以将

defs

中的一些内容存储到外部文件中，然后将它们加载到主SVG文档中吗

---

谢谢。

您可以存储外部模式中引用的PNG图像，也可以引用外部文件的一部分，即。e。文件

paint.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- no need for a <defs> here, <pattern> is never rendered directly -->
    <pattern id="pat01" patternUnits="userSpaceOnUse" width="8px" height="8px">
        <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAAAAADhZOFXAAAACXBIWXMAAAsSAAALEgHS3X78AAAAE0lEQVQImWP4vx8CGaD0fwayRADXsTfBHa7CGAAAAABJRU5ErkJggg=="
              x="0" y="0" width="8px" height="8px" />
    </pattern>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" width="800" height="600">
    <rect width="100%" height="100%" style="fill:url(paint.svg#pat01);" />
</svg>

在CSS中定义模式而不引用SVG

元素是行不通的

在将来的某个时候，您可能可以将

fill

属性设置为图像，就像HTML

背景图像一样，但目前还没有实现