從C＃繪製SVG＃

我想創建一個由div組成的UserControl。在div裏面會有一些SVG渲染框。從數據中確定多少盒子和它們的相對位置。從C＃繪製SVG＃

的數據將在課堂上盒的列表的形式，其中箱如下：

public class SVGBox 
{ 
    public int x { get; set; } // x coordinate of a corner 
    public int y { get; set; } // x coordinate of same corner 
    public int l { get; set; } // length 
    public int h { get; set; } // height 
    public string Color { get; set; } 
    public string text { get; set; } 
    public string uniqueKey { get; set; } 

    public SVGBox (int X, int Y, int H, int W, string Text, string Key) 
    { 
     x = X; 
     y = Y; 
     h = H; 
     w = W; 
     text = Text; 
     uniqueKey = Key; 
    } 
}

我有我的「網發現，從C＃繪製SVG的例子，但它涉及到寫作用DOCTYPE中的特定引用排除整個HTML頁面。我如何在用戶控件中執行此操作？

來源

2013-01-18 Steve Wash

我會建議嘗試使用Html5和JavaScript如果可能的話。 – Jonathan

我在想，用Html5，盒子不是單獨的元素。我得到這個繪圖後的下一步是讓OnClick用獨特的關鍵點做些事情。有什麼理由支持Html5？ –

好吧，一旦我得到了正確的開始，不是太糟糕。

在ascx中，我只是添加了一個asp：Literal。這裏的代碼背後：

public partial class Controls_SVGTest : System.Web.UI.UserControl 
{ 
    public int Height { get; set; } 
    public int Width { get; set; } 
    public List<SVGBox> data { get; set; } 

    const string HeaderText = "<?xml version=\"1.0\" encoding=\"utf-8\" ?> <svg xmlns=\"http://www.w3.org/2000/svg\" " + 
           "xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"{0}\" width=\"{1}\" >"; 

    const string BoxSVG = "<rect x=\"{0}\" y=\"{1}\" height=\"{2}\" width=\"{3}\" rx=\"2\" fill=\"{4}\" stroke=\"#707070\" />"; 
    const string Footer = "</svg>"; 


    protected void Page_Load(object sender, EventArgs e) 
    { 
     LoadSVG(); 
    } 

    public void LoadSVG() 
    { 
     Literal1.Text = String.Format(HeaderText, Height.ToString(), Width.ToString()); 
     foreach (SVGBox s in data) 
     { 
      Literal1.Text += String.Format(BoxSVG, s.x, s.y, s.h, s.w, s.Color); 
     } 
     Literal1.Text += Footer; 
    } 

}

來源

2013-01-18 22:44:25

從C＃繪製SVG＃

回答

相關問題