文章分享

SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。

SVG 使用 XML 格式定義圖像。

SVG可直接嵌入到HTML5中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg>

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Projects that uses wxSVG

wxSVG (sourceforge.io)

Using of wxSVG

Loading and Displaying of SVG

There are two methods to display SVG:

• Using wxSVGCtrl widget:

  m_svgCtrl = new wxSVGCtrl(this);
  m_svgCtrl->Load(wxT("tiger.svg"));

• Using Render method in wxSVGDocument class:

  wxSVGDocument* svgDoc = new wxSVGDocument;
  svgDoc->Load(wxT("tiger.svg"));
  wxImage img = svgDoc->Render();

Dynamic creating of SVG

Here is an example of dynamic creation

wxSVGDocument* svgDoc = new wxSVGDocument;
double w=450,h=450;
wxSVGSVGElement* svgElement = new wxSVGSVGElement;
svgElement->SetWidth(w);
svgElement->SetHeight(h);
svgDoc->AppendChild(svgElement);

wxSVGRectElement* rect = new wxSVGRectElement;
rect->SetX(0);
rect->SetY(0);
rect->SetWidth(w);
rect->SetHeight(h);
rect->SetFill(wxSVGPaint(0,0,0));
svgElement->AppendChild(rect);

rect = new wxSVGRectElement;
rect->SetX(50);
rect->SetY(50);
rect->SetWidth(w-100);
rect->SetHeight(h-100);
rect->SetFill(wxSVGPaint(0,0,255));
rect->SetStroke(wxSVGPaint(255,255,255));
rect->SetStrokeWidth(2);
rect->SetFillOpacity(.5);
svgElement->AppendChild(rect);

rect = (wxSVGRectElement*) rect->CloneNode();
double x = w/4+50;
double y = h/4+50;
rect->SetX(x);
rect->SetY(y);
rect->SetWidth(w/2);
rect->SetHeight(h/2);
rect->SetFill(wxSVGPaint(0,0,0));
rect->Rotate(45, x + w/4, y + h/4);
svgElement->AppendChild(rect);

m_svgCtrl->SetSVG(svgDoc);