SVG将路径的填充模式缩放到路径大小

时间:2018-03-28 13:14:28

标签: svg path

我正在尝试将模式应用于几条路径。 事实上,我失败的是,图案中包含的图像是1000px x 500px,而我试图应用此图案的路径具有不同的较小尺寸。 我需要以包含路径的大小应用模式。

如果它按比例缩小,例如,图案的宽度不够大,我需要重复它..

示例代码:

<?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

当我更改图像的宽度和高度或图案的比例时,它在某些路径中不再可见,而在其他一些路径中则会转换...

有人知道这怎么可能,我的问题可以理解吗?

1 个答案:

答案 0 :(得分:0)

使用patternContentUnits并没有解决我的问题。 我现在用&#39; viewbox&#39;解决了这个问题。在我的模式。此属性设置为图像的大小。作品:-)

谢谢@RobertLongson的回答: - )