使用background-image为SVG rect填充点画图案

SVG元素（比如<rect>）不支持HTML元素的background-image属性，因为两者渲染逻辑不同——SVG靠fill/stroke控制填充，而CSS渐变无法直接作为SVG的fill值（除非配合SVG内部的<defs>/<pattern>）。要实现纯CSS方案，可以将点画图案封装为data URI格式的SVG图案，直接通过CSS赋值给SVG元素的fill属性，无需在主SVG中定义<defs>。

修改后的代码 #

CSS部分 #

.stipple {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}

/* 给HTML div设置点画背景 */
div.stipple {
  background-color: white;
  background-image: radial-gradient(black 0.5px, transparent 0.5px),
                    radial-gradient(black 0.5px, transparent 0.5px);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
}

/* 给SVG rect设置点画填充 */
svg .stipple {
  /* 将点画图案封装为data URI的SVG，作为fill值 */
  fill: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><pattern id="p" width="5" height="5" patternUnits="userSpaceOnUse"><circle cx="0" cy="0" r="0.5" fill="black"/><circle cx="2.5" cy="2.5" r="0.5" fill="black"/></pattern><rect width="100%" height="100%" fill="white"/><rect width="100%" height="100%" fill="url(%23p)"/></svg>');
}

HTML部分 #

<div class="stipple"></div>
<svg width="200" height="200">
  <rect width="200" height="200" class="stipple" />
</svg>

方案说明 #

• 针对HTML的<div>，保留原有的background-image渐变实现；
• 针对SVG的<rect>，将点画图案做成一个小型SVG（包含<pattern>定义和白色背景），转成data URI后直接作为fill的值；
• 整个过程无需修改主SVG的结构，完全通过CSS控制，符合你不想使用<defs>/<pattern>的需求。

内容的提问来源于stack exchange，提问作者Roly