如何使用background-position:center; svg模式的行为?

时间:2018-01-19 10:48:04

标签: svg

我正在使用带有模式的svg。 svg是浏览器窗口的全宽。当我调整浏览器大小时,我希望svg模式从svg(background-position: center;行为)的中心扩展。

html {
  height: 100%;
  }
  
body {
  height: 100%;
  margin: 0;
}
<svg width="100%" height="100%">
    <defs>
        <pattern id="pat" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
            <polygon points="12,5 7,5 7,0 5,0 5,5 0,5 0,7 5,7 5,12 7,12 7,7 12,7 "/>
        </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#pat)" />
</svg>

运行代码段时,请调整结果窗口的大小。图案从左上方展开并收缩。我希望模式从svg的中心扩展和收缩。这可能吗

1 个答案:

答案 0 :(得分:1)

问题是坐标的原点(以及模式)位于SVG的左上角。要使模式居中,您必须将该原点置于SVG的中心。

普通transform属性不能这样做,因为它们不占用百分比。实现它的唯一方法是使用<use>元素。它的xy属性实际上是trannsform但它们确实允许百分比。

因此,解决方案是使<rect> 100%的宽度和高度,但将其定位在x="-50%" y="-50%",使其中心位于原点。然后,我们使用<use>元素将原点移动到(50%,50%)。

点击“整页”以获得最佳观看次数

html {
  height: 100%;
  }
  
body {
  height: 100%;
  margin: 0;
}
<svg width="100%" height="100%">
  <defs>
    <pattern id="pat" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
      <polygon points="12,5 7,5 7,0 5,0 5,5 0,5 0,7 5,7 5,12 7,12 7,7 12,7 "/>
    </pattern>
    <rect id="rect" x="-50%" y="-50%" width="100%" height="100%" fill="url(#pat)" />
  </defs>
  <use xlink:href="#rect" x="50%" y="50%"/>
</svg>

但是如果你试试这个,它仍然不会显得居中。那是因为您的十字符号不是以24x24模式为中心。如果我们重新定位十字架以使它位于模式的中心,那么你就得到了这个:

html {
  height: 100%;
  }
  
body {
  height: 100%;
  margin: 0;
}
<svg width="100%" height="100%">
  <defs>
    <pattern id="pat" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
      <polygon points="18,11 13,11 13,6 11,6 11,11 6,11 6,13 11,13 11,18 13,18 13,13 18,13 "/>
    </pattern>
    <rect id="rect" x="-50%" y="-50%" width="100%" height="100%" fill="url(#pat)" />
  </defs>
  <use xlink:href="#rect" x="50%" y="50%"/>
</svg>