Question

我正在尝试基于svg文件构建描边线，以找出其颜色和边角形状的原因。每个笔划为15px宽，并且每行之间也有一个间隔15px。问题是，当我尝试通过background-image将其包括在内时，它总是使该行比实际应该的更长。

.stroke-dotted {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSI0cHgiIHZpZXdCb3g9IjAgMCAxNSA0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IldlYnNpdGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQyLjAwMDAwMCwgLTE5NDAuMDAwMDAwKSIgc3Ryb2tlPSIjMTZDREM3IiBzdHJva2Utd2lkdGg9IjMiPgogICAgICAgICAgICA8ZyBpZD0iU2VydmljZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDE0ODguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iV2ViZGVzaWduIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDQzOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNODIsMTYgTDk3LDE2IiBpZD0ibGluZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
  width: 100%;
  background-repeat: repeat-x;
}

<div class="stroke-dotted"></div>

那就是它的外观：

现在就是这样：

有没有一种方法可以给行指定特定宽度15px以及间距15px？我还尝试使用background-size属性对其进行修复，但没有成功。

Answer 1

第一件事：不要将SVG编码为base64，它比原始代码长多，而且不必要，因为您可以将代码添加到url中。您可能需要对IE11和更早版本的URL进行编码，但是否则所有浏览器都支持它。

现在，要控制SVG标签的大小，请省略 viewBox，只需将其宽度和高度设置为100%，并用百分比表示所有其他值。现在，即使点以百分比定义，您也可以通过定义线条的像素大小来控制线条的大小：

div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  background: url('data:image/svg+xml;charset=utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">\
    <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="cyan" stroke-width="1px" stroke-dasharray="15px 15px" />\
  </svg>') no-repeat 50% 50% / cover;
}
body {
  /* A reference grid */
  background: url('data:image/svg+xml;charset=utf8,<svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg">\
    <rect x="0" y="0" width="100%" height="100%" stroke="#222" stroke-width="1px" fill="black" />\
  </svg>');
}

<div></div>

正确设置了SVG之后，就可以像定义像素值的stroke-dasharray属性一样简单：

<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="black" stroke-width="1px" stroke-dasharray="15px 15px" />

现在，您可以使用CSS来更改框，甚至可以使用SVG来更改SVG背景中的偏移量。

如何基于base64给笔划指定宽度

1 个答案: