中心图像的模式

Question

我有一个SVG，其矩形宽度为100％，我在其中应用了一个模式。 我希望将图案中包含的图像放在矩形的中心然后重复。 CSS等效项为：AfterReceiveReply。

我会使用模式的x，但事先知道宽度。

以下是片段：

＆＃13;

＆＃13;

background-position: center;

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，确定browser width，比如说这个例子是600px。

接下来确定图案宽度，比如它是17px，从那里你可以用600 % 17 = 5计算余数。这意味着如果从左上角绘制，则会留下5px。

最后在中间绘制图标，偏移量为5/2 pixel 较小。在这种情况下，x位置为600/2 (center width) - 17/2 (center of pattern) - 5/2 (offset)。

TLDR; x = ((browser_width - pattern_width - (browser_width % pattern_width))/2