在 ASP.NET 页面中内联编码 SVG 会导致 SVG JavaScript 创建 SVGPoint(）;函数中断

coding SVG inline in an ASP.NET page causes the SVG javascript createSVGPoint(); function to break

本文关键字：SVG 创建 JavaScript SVGPoint 中断 函数 NET ASP 编码      更新时间：2023-09-26

我需要 ASP.NET 我创建的SVG中的服务器端代码。为此，我创建了一个.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";

如果你的 SVG 被包装在 HTML 页面中，那么将该 JS 嵌入到 HTML 而不是 SVG 中可能更有意义。给你的 SVG 元素一个 ID，以便你可以轻松访问它，瞧。脚本完全相同。

我怀疑createSVGPoint的用处，但你最好使用自己的Point原型。

如果 HTML 文档破坏了 SVG 命名空间，请使用对象或图像元素将 SVG 作为 XHTML 文档的外部实体加载。

相关文章：