赤い丸をクリックすると、大きくなるサンプルですが、オリジナルページの サンプルコードは、クリップボードにコピーすると改行コードなくなるので 書き直しました ( Firefox や Chrome ではきちんとコピーできます ) ※ 『Internet Explorer 9 開発者ガイド』と銘打っているのに IE で使えない不思議なページ ( SVG 要素が動作したのは、IE9 と Firefox と Chrome )
<svg xmlns=http://www.w3.org/2000/svg
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600"
height="600">
<script type="text/ecmascript">
<![CDATA[
var redcircle;
var r;
window.onload = function() {
redcircle = document.getElementById('redcircle');
r = parseInt(redcircle.getAttribute("r"));
}
var grow = function() {
r = 2*r;
redcircle.setAttribute("r",r);
}
var shrink = function() {
r = r/2;
redcircle.setAttribute("r",r);
}
]]>
</script>
<circle
id="redcircle"
cx="100"
cy="100"
r="50"
fill="red"
onmousedown="grow()"
onmouseup="shrink()"
/>
</svg>
|
|
【SVGの最新記事】
