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

Question

I require ASP.NET server side code in a SVG that I created. To accomplish this, I created a .aspx file and inserted the SVG code like this:

<%@ 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>

This works fine, I can use <% %> and add server side logic into my SVG. However I need to use hidden fields to get information back out of the JavaScript.

As soon as I wrap this code in html and add a form etc; the SVG specific JavaScript will break, namely the createSVGPoint() function. The SVG still renders properly though...

Does anyone know a work around, or a better way to add server side logic to an SVG?

EDIT: Updated Example

<!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>

Also, have tried adding content types in pageLoad()

Response.ContentType = "image/svg+xml";
Response.ContentType = "application/xhtml+xml";

score 2 · Accepted Answer · answered Jun 12 '12 at 11:56

2

If your SVG is wrapped in HTML page, than it might make more sense to embed that JS in HTML instead of SVG. Give your SVG element an ID so that you can access it easily, and voila. The scripting is exactly the same.

I doubt the usefulness of createSVGPoint though, you'd be better with your own Point prototype.

answered Jun 12 '12 at 11:56

skrat

5,518
3
32
48

I am going to test this. As far as createSVGPoint goes, I could do without it. However, I have a huge script that I wrote that leverages createSVGPoint repeatedly... though not ideal, I could modify it. – Mausimo Jun 12 '12 at 14:42
I changed the JS so it is in the HTML head. The createSVGPoint function still breaks. – Mausimo Jun 12 '12 at 15:15
Can you post a snippet how do you call it ? – skrat Jun 13 '12 at 16:12
Hi, see my edit please. I addded a contrived example to show my problem. – Mausimo Jun 13 '12 at 17:31
1

createSVGPoint is method of SVGSVGElement. Replace your svgRoot with `document.getElementById('mySVG')` – skrat Jun 13 '12 at 23:10
That works, the SVG is working inside the html. However, my mouse coordinates are all screwed up now. The SVG is getting coordinates based on where the SVG is in the HTML page, rather than where the mouse is in the SVG. Any ideas? – Mausimo Jun 14 '12 at 15:16
I was able to fix this by finding the SVG elements x,y coordinates and subtracting these off the value returned by the mouse. Thanks for the help! – Mausimo Jun 14 '12 at 15:31

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

If the HTML document is breaking the SVG namespace, use an object or image element to load the SVG as an external entity of the XHTML document.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 13 '12 at 01:22

Paul Sweatte

24,148
7
127
265

If I load the SVG as an external entity, how do I use server side code inside it? Right now my SVG is riddled with <% %>. – Mausimo Jun 13 '12 at 17:34
Reference the working SVG file with the .aspx extension as the data value of the object tag, but set its codetype attribute to ["image/svg-xml"](http://msdn.microsoft.com/en-us/magazine/cc164114.aspx#S5). – Paul Sweatte Jun 13 '12 at 19:39

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

2 Answers2