ClipPath and System.Uri

Mar 20, 2012 at 10:44 AM

I have created a ClipPath with a rectangle inside my definitionlist.

 

How am I supposed to link the clippath to my text element?

In xml/svg the linking happens with a functional notation => clip-path="url(#myid)"

 

In the svg rendering text object I have to enter a System.Uri

I have tried many solutions and searched the web for documentation but I haven't found a solution.

 

Can anyone help me out?

 

Coordinator
Mar 20, 2012 at 1:16 PM

I haven't verified this yet, but I think simply creating a new relative URI should do the trick:

 

element.ClipPath = new Uri("#ClipPathId", UriKind.Relative);

Have you tried that?

 

Mar 20, 2012 at 1:27 PM
Edited Mar 20, 2012 at 2:12 PM

thanks for the answer Dave

 

Dim uri As New System.Uri("#" & element.Attributes("clip-path").Value.Replace("url(#", "").Replace(")", ""), UriKind.Relative)
CType(mySvg.GetElementById(clipId), Svg.SvgText).ClipPath = uri

 

This is indeed what I am doing. But this does not work when I save the object as PNG or JPG.

Coordinator
Mar 21, 2012 at 2:08 AM

I did a quick test and it looks like you shouldn't have to do any kind of processing of the URI. The standard clip-path="url(#myid)" syntax will work fine:

element.ClipPath = new Uri("url(#ClipPathId)", UriKind.Relative);

The clipping functionality also appears to be working as expected (the example in another discussion uses clip paths and I've added multiple clip shapes to this and they have all worked).

Are you able to attach a sample file that shows the issue you're having?

Mar 21, 2012 at 3:35 PM
Edited Mar 21, 2012 at 4:09 PM

This is my SVG





<
svg width="700" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g transform="scale(1, 1)"> <rect id="background" x="0" y="0" width="701" height="151" fill="#FFFFFF" stroke="#FFFFFF" /> <text id="nvbvbacvanderenlnvtotaltext1black" x="113" y="61" rotate="0" font-size="10" text-anchor="middle" fill="#000000" font-family="Verdana">92000</text> <text id="nvbvbacvanderenlnvtotaltext2black" x="113" y="75" rotate="0" font-size="10" text-anchor="middle" fill="#000000" font-family="Verdana">30000</text> <text id="nvbvbacvanderenlnvtotaltext3black" x="113" y="89" rotate="0" font-size="10" text-anchor="middle" fill="#000000" font-family="Verdana">88534</text> <text id="nvbvbacvanderenlnvtotaltext4black" x="113" y="103" rotate="0" font-size="10" text-anchor="middle" fill="#000000" font-family="Verdana">92106</text> <text id="nvbvbacvanderenlnvtotaltext5black" x="113" y="117" rotate="0" font-size="10" text-anchor="middle" fill="#000000" font-family="Verdana">92227</text> <text id="nvbvbacvanderenlnvtotaltext6black" x="113" y="131" rotate="0" font-size="10" text-anchor="middle" fill="#000000" font-family="Verdana">88534</text> <rect id="nvbvbacvanderenllegend1" x="35" y="50" width="35" height="14" fill="#39B652" stroke="none" /> <rect id="nvbvbacvanderenllegend2" x="35" y="64" width="35" height="14" fill="#73B2EF" stroke="none" /> <rect id="nvbvbacvanderenllegend3" x="35" y="78" width="35" height="14" fill="#39B652" stroke="none" /> <rect id="nvbvbacvanderenllegend4" x="35" y="92" width="35" height="14" fill="#73B2EF" stroke="none" /> <rect id="nvbvbacvanderenllegend5" x="35" y="106" width="35" height="14" fill="#39B652" stroke="none" /> <rect id="nvbvbacvanderenllegend6" x="35" y="120" width="35" height="14" fill="#73B2EF" stroke="none" /> <rect id="nvbvbacvanderenlnvtotal1" x="73" y="50" width="40" height="14" fill="#39B652" stroke="none" /> <rect id="nvbvbacvanderenlnvtotal2" x="73" y="64" width="26.0227482190682" height="14" fill="#73B2EF" stroke="none" /> <rect id="nvbvbacvanderenlnvtotal3" x="73" y="78" width="76.7965996942327" height="14" fill="#39B652" stroke="none" /> <rect id="nvbvbacvanderenlnvtotal4" x="73" y="92" width="79.8950415821831" height="14" fill="#73B2EF" stroke="none" /> <rect id="nvbvbacvanderenlnvtotal5" x="73" y="106" width="80" height="14" fill="#39B652" stroke="none" /> <rect id="nvbvbacvanderenlnvtotal6" x="73" y="120" width="76.7965996942327" height="14" fill="#73B2EF" stroke="none" /> <text id="nvbvbacvanderenllegendtext1" x="39" y="61" rotate="0" font-size="10" fill="#FFFFFF" font-family="Verdana">2005</text> <text id="nvbvbacvanderenllegendtext2" x="39" y="75" rotate="0" font-size="10" fill="#FFFFFF" font-family="Verdana">2006</text> <text id="nvbvbacvanderenllegendtext3" x="39" y="89" rotate="0" font-size="10" fill="#FFFFFF" font-family="Verdana">2007</text> <text id="nvbvbacvanderenllegendtext4" x="39" y="103" rotate="0" font-size="10" fill="#FFFFFF" font-family="Verdana">2008</text> <text id="nvbvbacvanderenllegendtext5" x="39" y="117" rotate="0" font-size="10" fill="#FFFFFF" font-family="Verdana">2009</text> <text id="nvbvbacvanderenllegendtext6" x="39" y="131" rotate="0" font-size="10" fill="#FFFFFF" font-family="Verdana">2010</text> <text id="nvbvbacvanderenlnvtotaltext1" x="113" y="61" rotate="0" font-size="10" text-anchor="middle" fill="#FFFFFF" font-family="Verdana" clip-path="url(#nvbvbacvanderenlnvtotaltext1clip)">92000</text> <text id="nvbvbacvanderenlnvtotaltext2" x="113" y="75" rotate="0" font-size="10" text-anchor="middle" fill="#FFFFFF" font-family="Verdana" clip-path="url(#nvbvbacvanderenlnvtotaltext2clip)">30000</text> <text id="nvbvbacvanderenlnvtotaltext3" x="113" y="89" rotate="0" font-size="10" text-anchor="middle" fill="#FFFFFF" font-family="Verdana" clip-path="url(#nvbvbacvanderenlnvtotaltext3clip)">88534</text> <text id="nvbvbacvanderenlnvtotaltext4" x="113" y="103" rotate="0" font-size="10" text-anchor="middle" fill="#FFFFFF" font-family="Verdana" clip-path="url(#nvbvbacvanderenlnvtotaltext4clip)">92106</text> <text id="nvbvbacvanderenlnvtotaltext5" x="113" y="117" rotate="0" font-size="10" text-anchor="middle" fill="#FFFFFF" font-family="Verdana" clip-path="url(#nvbvbacvanderenlnvtotaltext5clip)">92227</text> <text id="nvbvbacvanderenlnvtotaltext6" x="113" y="131" rotate="0" font-size="10" text-anchor="middle" fill="#FFFFFF" font-family="Verdana" clip-path="url(#nvbvbacvanderenlnvtotaltext6clip)">88534</text> </g> <defs> <clipPath id="nvbvbacvanderenlnvtotaltext1clip"><rect id="nvbvbacvanderenlnvtotal1CLIPRECT" x="73" y="50" width="40" height="14" /></clipPath> <clipPath id="nvbvbacvanderenlnvtotaltext2clip"><rect id="nvbvbacvanderenlnvtotal2CLIPRECT" x="73" y="64" width="26.0227482190682" height="14" /></clipPath> <clipPath id="nvbvbacvanderenlnvtotaltext3clip"><rect id="nvbvbacvanderenlnvtotal3CLIPRECT" x="73" y="78" width="76.7965996942327" height="14" /></clipPath> <clipPath id="nvbvbacvanderenlnvtotaltext4clip"><rect id="nvbvbacvanderenlnvtotal4CLIPRECT" x="73" y="92" width="79.8950415821831" height="14" /></clipPath> <clipPath id="nvbvbacvanderenlnvtotaltext5clip"><rect id="nvbvbacvanderenlnvtotal5CLIPRECT" x="73" y="106" width="80" height="14" /></clipPath> <clipPath id="nvbvbacvanderenlnvtotaltext6clip"><rect id="nvbvbacvanderenlnvtotal6CLIPRECT" x="73" y="120" width="76.7965996942327" height="14" /></clipPath> </defs> </svg>

This is my outcome in JPG. As you can see the white text (which should be clipped) is still there which creates a weird efffect. The white text overlays the black text and this gives a distorted outcome in this picture.

 

 

this is my code (asp.net project that returns charts)

 

Dim newStream As New System.IO.MemoryStream(ASCIIEncoding.Default.GetBytes(newDom.InnerXml))
Dim testSVG As Svg.SvgDocument = Svg.SvgDocument.Open(newStream, Nothing)

Dim tempStream As New System.IO.MemoryStream()
testSVG.Draw().Save(tempStream, System.Drawing.Imaging.ImageFormat.Jpeg)
Dim img As System.Drawing.Image
img = System.Drawing.Image.FromStream(tempStream)
img.Save(tempStream, System.Drawing.Imaging.ImageFormat.Jpeg)
Context.Response.ContentType = "image/jpeg"
Context.Response.BinaryWrite(tempStream.ToArray)

 

(newDom.innerXml contains the svg string)

 

 

I'm not sure where the problem is, the linking, the rendering ,....

Coordinator
Mar 21, 2012 at 10:42 PM

Ah, it looks like you're possibly using the latest download version? There have been many bug fixes in the source code that haven't been released since then*.

The latest version of the source code doesn't appear to have this issue (your SVG file seems to render as expected), so if you can, download the latest source code and compile it.

 

* - It's possible that clipping isn't even supported in that download.

Mar 22, 2012 at 8:30 AM
Edited Mar 22, 2012 at 10:13 AM

I was indeed using the latest download version.

I've compiled the source code and everything works fine right now!

 

Thanks for the support Dave