[インタラクティブSVGコンポーネント]Button
2076 ワード
One of the most basic elements for an interactive image is a button. Arguably any element associated with an
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 tag and add the
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.
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)
http://www.petercollingridge.co.uk/interactive-svg-components/button
onmouseup() 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
onmouseup() event to them both. <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.
<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:
http://www.petercollingridge.co.uk/interactive-svg-components/button