努力したWiki

推敲の足りないメモ書き多数

トレース:

documents:proglang:js:web-004

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- documents:proglang:js:web-004 [2026/05/16 02:06] – [006.SVGにスクリプトを埋め込むサンプル] k896951
+++ documents:proglang:js:web-004 [2026/05/16 02:08] (現在) – k896951
@@ 行 1: / 行 1: @@
+====== 004.SVGにスクリプトを埋め込む ======
+今だとブラウザが気を利かせてくれてスクリプト実行できなくなってるみたい。\\
+ただ、ローカルにsvgをダウンロードしてブラウザへ直接D&Dすると反応するから、利用シーンによっては使える場合があるかも。
+===== スクリプト無し =====
+<WRAP group>
+<WRAP half column>
+{{:documents:other:samplesvg1.svg?nolink |}}
+</WRAP>
+<WRAP half column>
+<code xml sample1.svg>
+<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
+  <path d="M50 200 C 150 50, 250 350, 350 200 S 450 50, 550 200"
+        stroke="red" stroke-width="3" fill="none"/>
+  <text x="100" y="350" font-family="Arial" font-size="48" fill="red"
+        filter="url(#shadow)">
+    SVG sample!
+  </text>
+  <filter id="shadow">
+    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black"/>
+  </filter>
+</svg>
+</code>
+</WRAP>
+</WRAP>
+===== スクリプト有り =====
+画像のテキストにonClickイベントを入れてみた。
+<WRAP group>
+<WRAP half column>
+{{:documents:other:samplesvg2.svg?nolink |}}
+</WRAP>
+<WRAP half column>
+<code xml sample2.svg>
+<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
+  <path d="M50 200 C 80 100, 150 50, 200 80 S 250 200, 200 300 S 100 350, 50 280 C 20 250, 50 150, 150 100 C 250 50, 350 100, 400 200 S 450 300, 400 350 S 300 400, 250 300"
+        stroke="red" stroke-width="3" fill="none" />
+  <text x="100" y="350" font-family="Arial" font-size="48" fill="red"
+        filter="url(#shadow)" onclick="showAlert()">
+    SVG sample!
+  </text>
+  <filter id="shadow">
+    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black"/>
+  </filter>
+  <script type="text/javascript">
+    function showAlert() {
+      alert("SVG画像をクリックしちゃったね！");
+    }
+  </script>
+</svg>
+</code>
+</WRAP>
+</WRAP>

documents/proglang/js/web-004.txt · 最終更新: 2026/05/16 02:08 by k896951