问题描述:

Say we have a complex SVG pattern to use in object fill:

<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>

And it incorporates what could be called background color. (here it is stop-color from <stop offset='100%' style='stop-color:#fa9fb5; stop-opacity:1;' />). Actually we have 28 similar patterns. We have a color pallet (17 * 9 colors). And we want to have ability to create an SVG object for example rectangle or circle that would use a pattern yet would have a color from pallet as background.

It seems like code pre generation of 28 * 17 * 9 (3808) svg patterns each of 15-30 lines would make any mobile browser crush. While tipical application scenario is to use from 100 to 400 patterns.

We could generate and regenerate patterns while app is running yet it would be a messy job - keep svg dom clean, resource leaks and such also often regeneration of patterns on fly would probably require SVG to blink and reload.

There is an option to create an interface that would allow pattern background change and implement it using say D3js for each of 28 patterns... and store them in a factory... and each time we would need to create an object we would create instance and assign to it some random theme color... While I do like such solution and probably will end up with it (could check out what is CofeeScript they say it has clear classes and inheritance model) I would really enjoy some more simpler solution.

It would be great if we could declare inside svg pattern a modifiable value alike

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

So that when we use pattern we would be able to set it alike

fill: url(#texture-jeans?ExposedPatternValue=#333&OtherParam=0.5);

I wonder is there anything similar/alike in SVG (1.1/1.2/2.0) or we are stuck with static fill pattern models?

相关阅读:
Top