Though about doing an update on this ,
here the intitial design is done with Inkscape.
but then need to use scripting to get the desired effects
Code:
<svg id='Radio buttons' x='0' y='0' width='75' height='120' >
<defs>
<linearGradient id='brown_button_off' gradientUnits='objectBoundingBox' x1='1' x2='1' y1='0' y2='1'>
<stop stop-color='#EFEFEF' offset='.1'/> <stop stop-color='brown' offset='1'/>
</linearGradient>
</defs>
<defs>
<pattern id='radio_group' width='75' height='30' patternUnits='userSpaceOnUse'>
<rect x='2' y='2' rx='3' ry='3' width='71' height='26' fill='url(#brown_button_off)' stroke='black' stroke-width='1'/>
<circle cx='12' cy='15' r='5' fill='#FFFFFF' stroke='red' stroke-width='3'/>
</pattern>
</defs>
<rect x='0' y='0' width='100%' height='100%'
ry='0' fill='white' fill-opacity='1' stroke='black' stroke-width='1' style='display:1 ' />
<desc>vertical radio group </desc>
<svg id='radio_group_1' x='0' y='0' width='100%' height='100%'>
<rect id='radio_group_1' fill='url(#radio_group)' sencex='100' stroke='black' stroke-width='1' width='100%' height='100%'/>
<sensitive x='0' y='0' width='300' height='300'/>
<circle cx='12' cy='15' r='4' fill='#000000'/>
<text x="0" y="0" dx='20' dy='20' fill="black" >Radio 99</text>
<text x="0" y="0" dx='20' dy='50' fill="black" >Radio 2</text>
<text x="0" y="0" dx='20' dy='80' fill="black" >Radio 3</text>
<text x="0" y="0" dx='20' dy='110' fill="black" >Radio 4</text>
</svg>
</svg>
can start by changing the values in first row in multiples of the initial value IE:
Code:
<svg id='Radio buttons' x='0' y='0' width='150' height='120' >
<defs>
<linearGradient id='brown_button_off' gradientUnits='objectBoundingBox' x1='1' x2='1' y1='0' y2='1'>
<stop stop-color='#EFEFEF' offset='.1'/> <stop stop-color='brown' offset='1'/>
</linearGradient>
</defs>
<defs>
<pattern id='radio_group' width='75' height='30' patternUnits='userSpaceOnUse'>
<rect x='2' y='2' rx='3' ry='3' width='71' height='26' fill='url(#brown_button_off)' stroke='black' stroke-width='1'/>
<circle cx='12' cy='15' r='5' fill='#FFFFFF' stroke='red' stroke-width='3'/>
</pattern>
</defs>
<rect x='0' y='0' width='100%' height='100%'
ry='0' fill='white' fill-opacity='1' stroke='black' stroke-width='1' style='display:1 ' />
<desc>vertical radio group </desc>
<svg id='radio_group_1' x='0' y='0' width='100%' height='100%'>
<rect id='radio_group_1' fill='url(#radio_group)' sencex='100' stroke='black' stroke-width='1' width='100%' height='100%'/>
<sensitive x='0' y='0' width='300' height='300'/>
<circle cx='12' cy='15' r='4' fill='#000000'/>
<text x="0" y="0" dx='20' dy='20' fill="black" >Radio 99</text>
<text x="0" y="0" dx='20' dy='50' fill="black" >Radio 2</text>
<text x="0" y="0" dx='20' dy='80' fill="black" >Radio 3</text>
<text x="0" y="0" dx='20' dy='110' fill="black" >Radio 4</text>
</svg>
</svg>
Have fun
Alex
Bookmarks