mercredi 28 mars 2018

SVG Scaling the filling-pattern of an path to the paths size

I'm trying to apply a pattern to a few paths. And I'm failing at the fact, that the image, that is contained in the pattern, is 1000px x 500px and the paths I'm trying to apply this pattern to, have different, smaller sizes. I need the pattern to be applied at the size of the containing path.

If it is scaled down and, for example, the width of the pattern is not big enough, I need it to be repeated..

Example Code:

<?xml version="1.0" encoding="UTF-16"?>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="svg" viewbox="0 0 463.99999 611.67727">
    <defs>
      <image id="_TEST_{84F53B36-9301-4E21-BE8C-B33492D12FB3}" x="0" y="0" width="1000px" height="500px" transform="rotate(0) translate(0,0) scale(1, 1)" 
       xlink:href="data:image/png;base64, HERE GOES THE BASE64-STRING OF MY IMAGE...."/>
      <pattern id="TESTID" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice">
        <use xlink:href="#_TEST_{84F53B36-9301-4E21-BE8C-B33492D12FB3}" x="0" y="0"/>
      </pattern>
      <pattern id="TESTID_90" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice" patternTransform="rotate(90)">
        <use xlink:href="#_TEST_{84F53B36-9301-4E21-BE8C-B33492D12FB3}" x="0" y="0"/>
      </pattern>
    </defs>
    <path d="M 379.20854, 526.88581  L 234.64025, 526.88581 L 234.64025, 537.76729 L 390.09002, 537.76729 L 379.20854, 526.88581" style="stroke:rgb(1,0,0);stroke-width:0.1mm" fill="url(#TESTID)"/>
    <path d="M 390.09002, 351.22757  L 390.09002, 1.46559 L 379.20854, 12.34707 L 379.20854, 351.22757 L 390.09002, 351.22757" style="stroke:rgb(4,0,0);stroke-width:0.1mm" fill="url(#TESTID_90)"/>
</svg>

Result of this

When I change the width and height of the image OR the scale of the pattern, it is not visible in some paths anymore and in some other it translates...

Has anybody an idea how this could be possible, and: Is my question comprehensible? :-D

Greets and Thx :-)

Aucun commentaire:

Enregistrer un commentaire