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

是的，你可以做到。但是你需要删除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>

Answer 2

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

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

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

更新了代码集：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>

Answer 3

正如Jesse Kernaghan评论的那样。您是否有理由不使用背景图片。

（请点击此处 - ＆gt; http://codepen.io/thepixelninja/pen/EPgPdx）

即。创建一个名为pattern.svg（或其他）的空文件。然后把你的svg代码粘贴到里面，添加svg头像这样......

<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="pattern" viewBox="0 0 100 100"><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="fill: url(#pattern2);" /></svg>

我已从图像中删除了笔划，因为我稍后会将其添加到div中。我们不希望中风重复。

然后保存新的svg图像文件并将其用作css中的普通背景图像。即...

<div id="circles"></div>

<style>
    #circles {

        //always center the circles within the box
        background-position:center;

        //change this to change the size of the circles
        background-size:100px 100px; 

        //point this to where you saved your new svg image
        background-image:url(http://urbanise.net.au/pattern.svg); 

        //set the width of the box
        width:100%; 

        //set the height
        height:500px; 

        //add the border back in
        border:5px solid #000; 

    }
</style>

像魅力一样工作：）

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

3 个答案: