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

Patterns: relative coordinates using viewbox. issue in firefox

Expand Messages
  • lexzzzo
    Hello svg developers, I have a problem with a pattern that has to have relative coordinates. At first, I used patternContentUnits = objectBoundingBox which
    Message 1 of 3 , Oct 31, 2012
    • 0 Attachment
      Hello svg developers,

      I have a problem with a pattern that has to have relative coordinates.
      At first, I used patternContentUnits = "objectBoundingBox" which seem to
      work well all modern browsers. However, I use Batik Rasterizer to allow
      users to convert SVGs to PDF and/or PNG and Batik Rasterizer didn't seem
      to support patternContentUnits = "objectBoundingBox for SVG to PDF
      conversion.
      <pattern xmlns="http://www.w3.org/2000/svg" <http://www.w3.org/2000/svg>
      id="Pattern2" x="0" y="0" width="1" height="1"
      patternContentUnits="objectBoundingBox">
      <rect x="0.1" y="0" width="0.33" height="1"
      style="fill:rgb(39,80,215)"/>
      <rect x="0.49" y="0" width="0.47" height="1"
      style="fill:rgb(11,198,221)"/>
      </pattern>


      As an alternative, I found a internet post in which they used viewBox="0
      0 1 1" preserveAspectRatio="none" instead of patternContentUnits =
      "objectBoundingBox". This solution works well in Chrome, IE9 and Batik
      Rasterizer. However, it is -not- working in Firefox (14).
      <pattern xmlns="http://www.w3.org/2000/svg" <http://www.w3.org/2000/svg>
      id="Pattern1" x="0" y="0" width="1" height="1" viewBox="0 0 1 1"
      preserveAspectRatio="none">
      <rect x="0.1" y="0" width="0.33" height="1"
      style="fill:rgb(39,80,215)"/>
      <rect x="0.49" y="0" width="0.47" height="1"
      style="fill:rgb(11,198,221)"/>
      </pattern>

      I have put a small example online here:
      http://mgcv.cmbi.ru.nl/example.svg <http://mgcv.cmbi.ru.nl/example.svg>
      (So the first works in Chrome, IE9 and Batik Rasterizer but not in FF14.
      And the second works well in Chrome, IE9 and FF14 but not in Batik
      Rasterizer PDF conversion)


      Does anybody have a suggestion? It seems to me that it should be
      possible to get the viewbox solution working in firefox?

      Thanks in advance!

      Cheers,
      Lex
      Radboud University Nijmegen, The Netherlands.


      [Non-text portions of this message have been removed]
    • th_w@ymail.com
      ... Both look identical for me in Firefox 17. I m not sure about the stable version 16, so maybe try again with an up-to-date Firefox? Thomas W.
      Message 2 of 3 , Nov 6, 2012
      • 0 Attachment
        --- In svg-developers@yahoogroups.com, "lexzzzo" <lovermars@...> wrote:
        >
        > I have put a small example online here:
        > http://mgcv.cmbi.ru.nl/example.svg <http://mgcv.cmbi.ru.nl/example.svg>
        > (So the first works in Chrome, IE9 and Batik Rasterizer but not in FF14.

        Both look identical for me in Firefox 17. I'm not sure about the stable version 16, so maybe try again with an up-to-date Firefox?

        Thomas W.
      • Robert Longson
        Firefox 16 and below have various bugs in patterns that use objectBoundingBox and viewBox. These have all been fixed in the upcoming Firefox 17 which is only a
        Message 3 of 3 , Nov 7, 2012
        • 0 Attachment
          Firefox 16 and below have various bugs in patterns that use objectBoundingBox and viewBox. These have all been fixed in the upcoming Firefox 17 which is only a couple of weeks from general release now.

          Best regards

          Robert.
        Your message has been successfully submitted and would be delivered to recipients shortly.