[交互式SVG组件]Button
One of the most basic elements for an interactive image is a button. Arguably any element associated with anonmouseup() event can be considered a button (note that buttons tend to be activate when the mouse button is released, not when it is first pressed down).
To make something that looks a bit like a button, we can draw a rectangle (possibly with rounded corners) and write some text on it. We can then group these elements with the <g> tag and add theonmouseup() event to them both.
[html]
<script type="text/ecmascript">
<![CDATA[
function buttonClick(evt)
{
alert('Click');
}
]]></script>
<g onmouseup="buttonClick(evt)">
<rect x="20" y="1" rx="5" ry="5"
width="52" height="22"/>
<text x="25" y="16">Button</text>
</g>
<script type="text/ecmascript">
<![CDATA[
function buttonClick(evt)
{
alert('Click');
}
]]></script>
<g onmouseup="buttonClick(evt)">
<rect x="20" y="1" rx="5" ry="5"
width="52" height="22"/>
<text x="25" y="16">Button</text>
</g>
This basic design is far from perfect - for one thing, if it weren't for the label, it might not be obvious that it even is a button.
The main problem is the way the cursor changes when it moves over the text element. To fix this, we set the cursor attribute of the group to 'pointer'. We can also make it more obviously a button by adding a hover effect.
[html]
<style>
g.button:hover{
opacity: 0.75;
}
</style>
<g class="button" cursor="pointer"
onmouseup="buttonClick(evt)">
<rect x="20" y="1" rx="5" ry="5"
width="52" height="22"/>
<text x="25" y="16">Button</text>
</g>
<style>
g.button:hover{
opacity: 0.75;
}
</style>
<g class="button" cursor="pointer"
onmouseup="buttonClick(evt)">
<rect x="20" y="1" rx="5" ry="5"
width="52" height="22"/>
<text x="25" y="16">Button</text>
</g>
Other options for the cursor attribute include:
default
crosshair
move
text
wait
help
e-resize (resize eastwards, also w-, s-, n-, ne-, nw-, se- and sw-resize)
补充：综合编程 , 其他综合 ,
