Question

我正在使用带有模式的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的中心扩展和收缩。这可能吗

Answer 1

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

普通transform属性不能这样做，因为它们不占用百分比。实现它的唯一方法是使用<use>元素。它的x和y属性实际上是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>

如何使用background-position：center; svg模式的行为？

1 个答案: