- From: Paul LeBeau <paul.lebeau@gmail.com>
- Date: Fri, 13 Sep 2013 20:45:49 +1200
- To: www-svg <www-svg@w3.org>
- Message-ID: <CACfsppASrayDyTZ+JKQT5JGPxWtc9b_6ofUNq2LF6dq4Z_oscg@mail.gmail.com>
I know Brian has been working on a proposal for variable width strokes.
However I wanted to proprose a different approach that I think uses a more
familiar SVG style. Hopefully this approach hasn't already been suggeted
and rejected. A quick summary follows:
<?xml version="1.0"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="
http://www.w3.org/2000/svg" version="1.1" width="450px" height="450px"
viewBox="0 0 450 450">
<defs>
<strokeProfile stopUnits="pathIndex" strokeUnits="userSpaceOnUse"
interpolationMethod="linear">
<stop offset="0" stroke-width="4"/>
<stop offset="2" stroke-width="32"/>
<stop offset="4" stroke-width="16"/>
<stop offset="5" stroke-width="10"/>
<stop offset="6" stroke-width="24"/>
<stop offset="8" stroke-width="4"/>
</strokeProfile>
</defs>
<g fill="none" stroke="url(#swirl)">
<path d="M 375,225 C 375,180 285,195 240,240 C 195,285 180,375 225,375 C
270,375 255,285 210,240 C 165,195 75,180 75,225 C 75,270 165,255 210,210 C
255,165 270,75 225,75 C 180,75 195,165 240,210 C 285,255 375,270 375,225 Z"
/>
</g>
</svg>
*stopUnits *can be one of "pathIndex" or "pathLength".
For "pathIndex", the stop offset value refers to the index of a coordinate
in the path or shape. If there are more coordinates in the path than stops
defined, then the last offset is re-used.
For "pathLength", the stop offset value refers to a fraction of the path
length (0..1 or 0%..100%)
*strokeUnits *can be one of "userSpaceOnUse" or "strokeWidth"
"userSpaceOnUse": absolute value in current userspace
"strokeWidth": a multiple of the currently defined stroke-width value
*interpolationMethod *can be one of "linear" or "spline"
"linear": stroke width between stop offsets is linearly interpolated
"spline": a Catmull-Rom spline is used to interpolate between stop offset
widths
Another sample definition:
<strokeProfile id="swirl" stopUnits="pathLength"
strokeUnits="strokeWidth" interpolationMethod="spline">
<stop offset="0" stroke-width="1"/>
<stop offset="0.25" stroke-width="8"/>
<stop offset="0.5" stroke-width="4"/>
<stop offset="0.625" stroke-width="2.5"/>
<stop offset="0.75" stroke-width="6"/>
<stop offset="1.0" stroke-width="1"/>
</strokeProfile>
Any thoughts? Does this approach have any merit? I know it is a bit more
verbose than the style suggested by Brian.
Paul
Received on Friday, 13 September 2013 08:46:36 UTC