在 ASP.NET 页面中内联编码 SVG 会导致 SVG javascript createSVGPoint();打破的功能答案

【问题标题】：coding SVG inline in an ASP.NET page causes the SVG javascript createSVGPoint(); function to break在 ASP.NET 页面中内联编码 SVG 会导致 SVG javascript createSVGPoint();打破的功能
【发布时间】：2012-06-14 01:30:50
【问题描述】：

我需要在我创建的 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";

【问题讨论】：

标签： javascript asp.net svg

【解决方案1】：

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

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

【讨论】：

我要测试一下。就 createSVGPoint 而言，我可以没有它。但是，我编写了一个巨大的脚本，它反复利用 createSVGPoint……虽然不理想，但我可以修改它。
我更改了 JS，使其位于 HTML 头部。 createSVGPoint 函数仍然中断。
你能发一个sn-p你怎么称呼它？
嗨，请看我的编辑。我添加了一个人为的例子来说明我的问题。
createSVGPoint 是 SVGSVGElement 的方法。将您的 svgRoot 替换为 document.getElementById('mySVG')

【解决方案2】：

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

【讨论】：

如果我将 SVG 作为外部实体加载，如何在其中使用服务器端代码？现在我的 SVG 充满了 .
引用带有 .aspx 扩展名的工作 SVG 文件作为对象标记的数据值，但将其代码类型属性设置为 "image/svg-xml"。