Loading ...
Sorry, an error occurred while loading the content.

Re: diagonal lines in pattern elements

Expand Messages
  • domenico_strazzullo
    As Erik suggested you need three lines if the line follows the diagonal. But if you want to use two lines, each must cross one adjacent pair of sides only
    Message 1 of 6 , May 2, 2012
    View Source
    • 0 Attachment
      As Erik suggested you need three lines if the line follows the diagonal. But if you want to use two lines, each must cross one adjacent pair of sides only (staying clear of the diagonal), using stroke-linecap="square" and no need for viewbox, like this:

      <pattern id="LL1" patternUnits="userSpaceOnUse" width="30" height="30">
      <rect x="0" y="0" width="30" height="30" fill="#f5f" opacity=".2" />
      <g stroke="#f5f">
      <line x1="-15" x2="15" y2="30" stroke-width="6.5" stroke-linecap="square" id="LLL"/>
      <use xlink:href="#LLL" transform="translate(30,0)"/>
      </g>
      </pattern>

      Better yet, you can use one vertical line only with patternTransform and no need for stroke-linecap:

      <pattern id="LL4" patternUnits="userSpaceOnUse" width="21" height="21" patternTransform="rotate(-45)">
      <rect width="30" height="30" fill="#f5f" opacity=".2"/>
      <line x1="15" x2="15" y2="30" stroke="#f5f" stroke-width="6.5" id="LLL"/>
      </pattern>

      The pattern's width and height of 21 make it the same size of the original without retouching the geometry. This solution also avoids a "minor" rendering glitch in IE9 (not due to the stroke width 6.5).

      Best,
      Domenico



      --- In svg-developers@yahoogroups.com, Marty Sullivan <dark3251@...> wrote:
      >
      > I can't say if that's the issue or not, but that's a very astute
      > observation.
      >
      > On Wed, Apr 4, 2012 at 10:09 PM, Daniel Bergqvist <daniel.b@...>wrote:
      >
      > > **
      > >
      > >
      > > I don't have a solution but an idea of that might have happend. Look att
      > > the image:
      > > http://www.mjtrafik.se/temp/temp/svg_pattern.png
      > >
      > > I have drawn some thin lines through the "holes" and it seems that the
      > > lines inside the circles extends outside the circles, but negative.
      > > Instead of drawing a line, a line is "removed". Inside the circle is
      > > "PATTERN", outside the circle is "NOT PATTERN" if you understand what I
      > > mean.
      > >
      > > Regards,
      > > Daniel
      > >
      > > David Dailey skrev 2012-04-05 03:16:
      > >
      > > > http://cs.sru.edu/~ddailey/svg/V12.svg
      > > >
      > > >
      > > >
      > > > In the bottom right illustration on this page, note how the diagonal
      > > lines
      > > > (created through varying both size and viewBox attributes on a pattern
      > > tag)
      > > > have small discontinuities. (in all modern browsers)
      > > >
      > > >
      > > >
      > > > Does anyone see an obvious way around that?
      > > >
      > > >
      > > >
      > > > Cheers
      > > >
      > > > David
      > > >
      > > > P.S. For a fun example with patterns see
      > > > http://srufaculty.sru.edu/david.dailey/svg/recent/sliderzoom2.svg and
      > > drag
      > > > the slider. Works the same in FF, Opera and IE (not so well in Chrome or
      > > > Safari though)
      > > >
      > > >
      > > >
      > > > [Non-text portions of this message have been removed]
      > > >
      > > >
      > > >
      > > > ------------------------------------
      > >
      > > >
      > > > -----
      > > > To unsubscribe send a message to:
      > > svg-developers-unsubscribe@yahoogroups.com
      > > > -or-
      > > > visit http://groups.yahoo.com/group/svg-developers and click "edit my
      > > membership"
      > > > ----Yahoo! Groups Links
      > > >
      > > >
      > > >
      > > >
      > > >
      > > > -----
      > > > No virus found in this message.
      > > > Checked by AVG - www.avg.com
      > > > Version: 2012.0.1913 / Virus Database: 2409/4915 - Release Date: 04/04/12
      > >
      > >
      > >
      >
      >
      > [Non-text portions of this message have been removed]
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.