XML Elves

themdg · #1 (**permalink**) 02-02-2010, 11:38 AM

Great forum. Seems pretty unique on the web. I'm gladd too...I could use more eyes on this little problem.

For a project I'm doing, I currently use svg templates, and drop svg elements into them. The template that is used changes based on various bit of criteria, but they're all about the same. The templates only differ by their overall size, and even then only a bit.

The templates are very simple. Here is an example:

Code:

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="200pt" height="150pt" viewBox="0 0 200 150" enable-background="new 0 0 200 150" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="matrix(1 0 0 1 0 0)">
  
  </g>  
</svg>

Others will be the same, but have different dimensions. Instead of 200x150, it might be 220x160.

What I'm having trouble doing is cropping the content I drop between the <g...> </g> tags without scaling.

My content is designed to be cropped at various points (that would fit into those templates). Here is an example of the content:

Code:

<rect x="0" y="0" width="200" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"  />  
<rect x="10" y="10" width="180" height="80" style="fill:blue"/>
<rect x="20" y="20" width="160" height="60" style="fill:white"/>			
<rect x="30" y="30" width="140" height="40" style="fill:purple"/>			
<rect x="40" y="40" width="120" height="20" style="fill:yellow"/>
<rect x="50" y="50" width="100" height="1" style="fill:black"/>

Which looks like this:

I'd like to be able to change my templates to crop down to these color elements without scaling. Maybe by using a clippath, or a viewbox.

For example, I know the blue box starts at 10,10 and is 180x80. How can I add a clippath or viewbox or something to the template to show image cropped, starting at the blue. Same size, with the blue corner at 0.0. Like this:

Convoluted, I know. Just trying to understand how this manipulation might work. Any ideas will be met with my gratitude, and a few less bangs of my head against the wall.

Once I understand this, I promise to write a wiki page, or weblog entry or something about cropping etc.

themdg · #2 (**permalink**) 02-04-2010, 01:53 PM

Thought I'd post an update and the solution I found in case others may be interested, and to help the board be useful.

I'm sure there is a more elegant solution that a more seasoned XMLmn might know, but this worked to educate me a bit.

So, to keep my image from scaling, the x, y, width, height in the svg tag needed to remain, as did the viewbox. That is, I wanted my finished product 180x80, even though the actual content is 252x144. So the start of my svg tag looked like:

Code:

<svg x="0pt" y="0pt" width="180pt" height="80pt" viewBox="0 0 180 80"...

It should have been obvious, but after messing around with these values, and the transform in my g tag, and adding clippaths etc, it got very confusing.

In the end, the size, viewbox, and transform were the answer.

This code:

Code:

<svg x="0pt" y="0pt" width="252pt" height="144pt" viewBox="0 0 252 144" preserveAspectRatio="xMidYMid" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g transform="matrix(1 0 0 1 0 0)"> 
	<rect x="0" y="0" width="252" height="144" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>  
	<rect x="10" y="10" width="180" height="80" style="fill:blue"/>
	<rect x="20" y="20" width="160" height="60" style="fill:white"/>			
	<rect x="30" y="30" width="140" height="40" style="fill:purple"/>			
	<rect x="40" y="40" width="120" height="20" style="fill:yellow"/>
	<rect x="50" y="50" width="100" height="1" style="fill:black"/>
</g>  
</svg>

produces this:

and this code:

Code:

<svg x="0pt" y="0pt" width="180pt" height="80pt" viewBox="0 0 180 80" preserveAspectRatio="xMidYMid" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  
  <g transform="matrix(1 0 0 1 -10 -10)" onload="replaceText();"> 
  
<rect x="0" y="0" width="252" height="144" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>  
<rect x="10" y="10" width="180" height="80" style="fill:blue"/>
<rect x="20" y="20" width="160" height="60" style="fill:white"/>			
<rect x="30" y="30" width="140" height="40" style="fill:purple"/>			
<rect x="40" y="40" width="120" height="20" style="fill:yellow"/>
<rect x="50" y="50" width="100" height="1" style="fill:black"/>
  
  </g>  
</svg>

produces this, which is just what I want.

In the end, the only data that will change dynamically will be the two values in the transform matrix. Easy enough to do with some ecmascript, but that won't work for me. I send this svg through some internal code that converts it to a PDF and it doesn't handle the script right. So, I'll back up and change the value in my java code as I build the svg. I know you didn't care about that last part, but since it was the basis of my orig. question I thought I'd put it out there.

PS...don't mind the "pass" text in there. It was part of my ecmascript test, which I removed in the code above.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

XML Elves

Help with Cropping in svg...

Help with Cropping in svg...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

XML Elves

Help with Cropping in svg...

Help with Cropping in svg...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)