是否可以使SVG比例适合父级,保持静态填充大小？

Question

我正在尝试用svg创建一个纸质纹理外观,我工作得相当好,使用透明覆盖层将纹理添加到它下面的svg项目的基本颜色上.

但是,我注意到纹理与SVG一起缩放.由于图像设置为页面的宽度,因此在大型显示器上它会变得极度拉伸并且看起来不太好.

是否可以自动获得svg资产比例,并使用固定大小的模式填充？

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

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

如果SVG可以从中心填充填充平铺,则可以获得奖励积分.谢谢!

这是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

我终于找到了一个相对不错的解决方法，使用 CSS 媒体查询。

因为您可以在 svg 中嵌入 css 媒体查询（这将根据 svg 的大小应用，就像通过 img 标签显示时一样），所以我可以设置不同缩放的模式作为填充元素。

我不知道内存权衡是什么，如果我在标签中有 10 种不同的缩放模式<defs>，并且媒体查询要匹配，但这对于我的应用程序来说已经足够好了，而且开销可以忽略不计。由于引用的图像是相同的，因此只需要加载一次。

更新的代码笔：http://codepen.io/mix3d/pen/BjdJge

    <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(#tsmall);fill-opacity:1;}
      .circle{fill:#62B4B8;}
      @media (max-width: 1000px){
        .overlay{fill:url(#tlarge);}
      }
    </style>


    <defs>
      <pattern id="tsmall" patternUnits="userSpaceOnUse" width="243" height="201">
        <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" />
      </pattern>
      <pattern id="tlarge" patternUnits="userSpaceOnUse" width="972" height="804">
        <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="972" height="804" />
      </pattern>
    </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>