html - 是否可以让 SVG 比例适合父对象，同时保持静态填充大小？

Question

我正在尝试使用 svg 创建纸张纹理外观，我工作得相当好，使用透明覆盖层将纹理添加到其下方 svg 项目的基本颜色之上。

但是，我注意到纹理随 SVG 缩放。由于图像被设置为页面的宽度，在大显示器上它变得极度拉伸(stretch)并且看起来不是很好。

是否可以让 svg Assets 自动缩放，并使用固定大小的图案填充？

这是一个带有完整示例的代码笔:http://codepen.io/mix3d/pen/jWMPQE

编辑:用实际的 svg 更新了 codepen，而不是理论上的

如果 SVG 可以从中心使用填充平铺进行拉伸(stretch)，则加分。谢谢!

这是 SVG 当前的样子，但纹理随 svg 缩放

<svg version="1.1" id="paper_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="10 0 1526 407.93">
<style type="text/css">
  .overlay{fill:url(#img1);fill-opacity:1;}
  .circle{fill:#62B4B8;}
</style>


<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="243" height="201">
    <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" />
  </pattern>
    <filter id="f3" x="-40%" y="0" width="180%" height="400%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="3" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
      <feColorMatrix in="blurOut" result="transparency" type="matrix"
        values="0 0 0 0   0
                0 0 0 0   0 
                0 0 0 0   0 
                0 0 0 .5 0"/>
      <feBlend in="SourceGraphic" in2="transparency" mode="normal" />
    </filter>
</defs>
<g>
   <circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/>
   <!-- I know I could probably use a filter to achieve the same overlay effect, but this worked for now, duplicate the object with the semi-transparent fill pattern -->
   <circle id="Background_Circle" class="overlay" cx="280.52"  cy="226.67" r="166.67"/>
</g>
</svg>

Answer 1

是的，你可以做到。但是您需要删除 viewBox。

然后，如果你使 <rect>宽度和高度为 100% ，您可以将 SVG 设为任何您想要的大小，并且该图案将重复并填充整个 SVG。

#svg1 {
  width: 100px;
  height: 100px;
}

#svg2 {
  width: 250px;
  height: 250px;
}

<svg id="svg1">
  <defs>
    <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill=#0000ff />
    </pattern>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" />
</svg>


<svg id="svg2">
  <defs>
    <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill=#0000ff />
    </pattern>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" />
</svg>