svg - 在调整路径大小时保持填充纹理原始大小

Question

我定义了一个像这样的svg <pattern>：

<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <defs> 
    <pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10"> 
      <image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjEwcHgiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAgMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgY3g9IjEuMjUiIGN5PSIxLjI1IiByPSIxLjI1Ii8+PHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+PC9zdmc+" 
        x="0" y="0" width="10" height="10">
      </image> 
    </pattern> 
  </defs> 
</svg>

在视觉上，这相当于：

然后我把我的css称为svg作为这样的填充：

svg #VISUEL-3 * {fill: url(#circles-1);}

我得到了一个非常好的结果：

但是当我显示我的图形较小（这是1/4）时，填充就像这样

很难在屏幕截图上看到因为100％的stackoverflow的宽度而导致缩放，但矢量效果：非缩放笔划完美地工作，因此笔划在第一个和第二个屏幕截图之间具有相同的大小和号码“1,2,3,4,5,6”也是如此。

因此，您可以看到填充已适应...

是否可以像css一样保持相同的图案尺寸（相同尺寸的点）？当我有两个不同尺寸的图形并且每个图形旁边的图形时，这看起来很混乱其他。

我的方法是否正确？ （我已准备好改变我的方法..）

Answer 1

在元素或其父元素之一进行转换之前，模式元素应用于引用元素 - 因此模式大小也会被转换。抵消这种情况的唯一方法是为您使用的每个比例写一个单独的模式元素，包括具有反比例的patternTransform。幸运的是，有一种克隆具有xlink:href属性的模式的机制。

.simple {
    fill: url(#dots);
}
.quarter {
    fill: url(#quadrupleDots);
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="150">
  <defs>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle r="1.25" cx="1.25" cy="1.25" />
    </pattern>
    <pattern id="quadrupleDots" xlink:href="#dots" patternTransform="scale(4)" />
  </defs>
  <rect id="shape" class="simple" x="20" y="20" width="100" height="100" />
  <rect class="quarter" x="800" y="80" width="100" height="100" transform="scale(0.25)" />
</svg>