SVG で相対座標を持たなければならないパターンに問題があります。最初に、最新のすべてのブラウザーでうまく機能するように見える patternContentUnits = "objectBoundingBox" を使用しました。ただし、Batik Rasterizer を使用して、ユーザーが SVG を PDF および/または PNG に変換できるようにしたかったのですが、Batik Rasterizer は、SVG から PDF への変換の patternContentUnits = "objectBoundingBox をサポートしていないようです。
<pattern 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>
別の方法として、patternContentUnits = "objectBoundingBox" の代わりに viewBox="0 0 1 1" preserveAspectRatio="none" を使用したインターネット投稿を見つけました。このソリューションは、Chrome、IE9、および Batik Rasterizer (!) でもうまく機能します。ただし、Firefox (14) では動作しません。
ここに小さな例をオンラインで掲載しました:
http://mgcv.cmbi.ru.nl/example.svg
(最初のものは Chrome、IE9、および Batik Rasterizer で動作しますが、FF14 では動作しません。2 つ目は Chrome、IE9、およびFF14 ですが、Batik Rasterizer にはありません (PDF 変換))
誰か提案がありますか？Viewbox ソリューションを Firefox で動作させることは可能だと思いますか?