html - 如何根据base64给笔画一个特定的宽度

Question

我正在尝试基于 svg 文件、颜色原因和它具有的 Angular 形状来构建描边线。每笔画都是 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 背景内的偏移量。