Question

假设我们在对象填充中使用了复杂的SVG模式：

<svg width=650 height=680>
    <defs> 
        <radialGradient id='rg' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
            <stop offset='10%' style='stop-color:#3d3d3d;'/>
            <stop offset='80%' style='stop-color:#3d3d3d;'/>
            <stop offset='100%' style='stop-color:#fa9fb5; stop-opacity:1;' /> <!-- mutate stop-color per instance/application -->
        </radialGradient>
        <pattern id="texture" patternUnits="userSpaceOnUse"  width="5" height="5" viewBox="0 0 5 5">
            <rect width='5' height='5' fill='url(#rg)'/>
        </pattern>
    </defs>
</svg>

它包含了所谓的背景颜色。（这里是来自stop-color的{{1}}）。实际上我们有28种相似的模式。我们有color pallet（<stop offset='100%' style='stop-color:#fa9fb5; stop-opacity:1;' />种颜色）。我们希望能够创建一个SVG对象，例如矩形或圆形，它将使用一个模式，但托盘的颜色将作为背景。

似乎代码预生成28 * 17 * 9（3808）svg模式，每个15-30行将使任何移动浏览器粉碎。虽然典型的应用场景是使用100到400种模式。

我们可以在应用程序运行时生成和重新生成模式，但这将是一个混乱的工作 - 保持svg dom干净，资源泄漏等常常在飞行中重新生成模式可能需要SVG闪烁并重新加载。

有一个选项可以创建一个允许模式背景更改的接口，并使用说明D3js为28个模式中的每一个实现它...并将它们存储在工厂中......每次我们需要创建一个对象我们将创建实例并为其分配一些随机主题颜色...虽然我确实喜欢这样的解决方案，但可能会最终得到它（可以查看CofeeScript是什么，他们说它有明确的类和继承模型）我真的很喜欢更简单的解决方案。

如果我们可以在svg模式中声明一个可修改的值

，那就太好了

17 * 9

因此，当我们使用模式时，我们可以将它设置为相似

<stop offset='100%' style='stop-color:{ExposedPatternValue}; stop-opacity:1;' />

我想知道SVG（1.1 / 1.2 / 2.0）中是否存在任何相似/相似之处，或者我们仍然坚持使用静态填充模式模型？

如何公开svg模式属性？

0 个答案: