作成したSVGにASP.NETサーバー側のコードが必要です。これを実現するために、.aspxファイルを作成し、次のようなSVGコードを挿入しました。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs"
Inherits="MyApp.MyPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="700px" height="700px" onload="initialize()">
<script type="text/ecmascript">
<![CDATA[
SCRIPT HERE
<% SERVER CODE %>
]]>
</script>
<defs>
<style type="text/css">
<![CDATA[
SVG STYLES
]]>
</style>
</defs>
SVG CODE
<% SERVER CODE %>
</svg>
これは正常に機能します。<%%>を使用して、サーバー側のロジックをSVGに追加できます。ただし、JavaScriptから情報を取得するには、非表示フィールドを使用する必要があります。
このコードをhtmlでラップし、フォームなどを追加するとすぐに; SVG固有のJavaScript、つまりcreateSVGPoint()関数は機能しなくなります。SVGはまだ正しくレンダリングされます...
誰かが回避策、またはサーバー側のロジックをSVGに追加するためのより良い方法を知っていますか?
編集:更新された例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/ecmascript" language="ecmascript">
var root;
var svgRoot;
var xmlns = "http://www.w3.org/2000/svg";
var mousePoint;
var transformedPoint;
function initialize() {
root = document;
svgRoot = document.documentElement;
//alert("hello"); --Works
mousePoint = svgRoot.createSVGPoint();
transformedPoint = svgRoot.createSVGPoint();
alert("hello"); -- Broken
}
</script>
<style type="text/css">
.Interactable
{
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="700px" height="700px" onload="initialize()">
<g id="WorkSpace" transform="matrix(1, 0, 0, -1, 350, 350)">
</g>
</svg>
</div>
</form>
</body>
</html>
また、pageLoad()でコンテンツタイプを追加してみました
Response.ContentType = "image/svg+xml";
Response.ContentType = "application/xhtml+xml";