[xep-support] Support for SVG patterns?

Alexander Peshkov peshkov at renderx.com
Wed Aug 11 08:56:38 PDT 2004


Hello Tim,

The main idea is to create large area stroked in desired way and then
use it as source for clipping whenever you need to create stroked
bar. Since this 'pattern' is reusable you can create it just once
(using some script, for example) and every time you use it you can
utilize different colors or background.
For example I have a picture that is 320 pixels wide and 110 pixels
tall. I want to draw several bars filled with "hatched" pattern of
diagonal lines using different colors. First of all I need to generate
SVG code for hatchet area - I've made it using very simple Perl
script:

  #!/usr/bin/perl
  print ("    <path d=\"");
  for ($i=5;$i<110;$i+=10) {
    $e=110-$i;
    print("M $i,0 L 110,$e M 0,$i L $e,110 ");
  }
  print ("\"/>");

Actually you can do it by hand since you have to do it only once, but
I'm lazy ;-)
Now I can put together a sample picture that demonstrates "hatching
without patterns" concept - you can find it in the attachment. The
main idea is that every time you need to draw a bar, you:
 A. create a 'clipPath' element with respective rectangle inside;
 B. create a 'use' element that refers to the 'pattern' mentioned above
    and clip it by the clipPath from step A;
 C. create a normal rectangle of the same size as the one from step A
    with desired stroking.

That's it! You have a bar that have a border and a hatched background.
You can vary hatching and background color by changing appropriate
properties on the <use> element from step B.

Attached image includes two bars and actually made by hand (apart from
auto-generated 'pattern'). However usually you will create an
XSLT stylsesheet (or custom program) that encapsulates some static
part of the SVG (such as pre-generated pattern, diagram axis etc.) and
produces SVG picture of bar-diagram being applied to some XML (or
other) data. 

Best regards,
Alexander Peshkov                             mailto:peshkov at renderx.com
RenderX


TD> Alexander -

TD> I'm pretty much a beginner at SVG, so this might be a stupid question, 
TD> but: How can I go about stroking a picture with an arbitrary pattern 
TD> that I want repeated throughout the area? In my case, I want a 
TD> "hatched" pattern of diagonal lines. I know how to draw a simple tile 
TD> but unless I can repeat that tile using a pattern I'm not sure how to 
TD> achieve what I want.

TD> Is there any plans to enhance XEP's SVG support anytime soon so that 
TD> patterns will be supported?

TD> Thanks,

TD> - Tim

TD> On Aug 10, 2004, at 3:37 AM, Alexander Peshkov wrote:

>> Hello Tim,
>>
>> You can achieve similar effect using clipping. For example if you
>> creating bar-chart you can use following technic: for every bar create
>> clipPath element with the rectangle of desired bar inside and then 
>> draw a
>> picture-wide rectangle stroked as you like. On each such rectangle set
>> clip-path reference that points to the appropriate bar clippath. As a
>> result big stroked picture will be clipped by the bar rectangle and
>> what you see will be a bar filled with desired stroking.
>>
>> Best regards,
>> Alexander Peshkov                             
>> mailto:peshkov at renderx.com
>> RenderX
>>
>> TD> Hello,
>>
>> TD> I'm doing some experiments in an attempt to use SVG for rendering
>> TD> graphs within my documents. My goal is to replace a library that 
>> we use
>> TD> to generate graphs as images, and to use SVG instead.
>>
>> TD> One of the problems I am having is that my SVG <pattern> elements 
>> do
>> TD> not appear to be working. Looking at the XEP documentation, I see 
>> that
>> TD> <pattern> is not one of the ones listed as a supported element.
>>
>> TD> Am I correct in assuming then that patterns are not supported by 
>> XEP?
>> TD> Any recommendations on how I might achieve a similar effect?
>>
>> TD> Thanks,
>>
>> TD> - Tim
>>
>> TD> -------------------
>> TD> (*) To unsubscribe, send a message with words 'unsubscribe 
>> xep-support'
>> TD> in the body of the message to majordomo at renderx.com from the 
>> address
>> TD> you are subscribed from.
>> TD> (*) By using the Service, you expressly agree to these Terms of 
>> Service http://www.renderx.com/tos.html
>>
>>
>> -------------------
>> (*) To unsubscribe, send a message with words 'unsubscribe xep-support'
>> in the body of the message to majordomo at renderx.com from the address
>> you are subscribed from.
>> (*) By using the Service, you expressly agree to these Terms of 
>> Service http://www.renderx.com/tos.html

TD> -------------------
TD> (*) To unsubscribe, send a message with words 'unsubscribe xep-support'
TD> in the body of the message to majordomo at renderx.com from the address
TD> you are subscribed from.
TD> (*) By using the Service, you expressly agree to these Terms of Service http://www.renderx.com/tos.html
-------------- next part --------------
A non-text attachment was scrubbed...
Name: graph.svg
Type: image/svg
Size: 1282 bytes
Desc: not available
URL: <http://lists.renderx.com/pipermail/xep-support/attachments/20040811/37b948a8/attachment.bin>


More information about the Xep-support mailing list