如何用D3.js创建带模糊描边的SVG rect元素？

没问题，我来帮你解决这个问题！不管是用纯SVG标记还是通过D3.js创建，都能实现带模糊描边的矩形，下面是具体方案：

一、纯SVG标记实现 #

核心思路是利用SVG的<filter>滤镜，先提取矩形的描边部分并做模糊处理，再和原矩形合并，这样就能得到仅描边模糊的效果：

<svg width="200" height="200">
  <!-- 定义滤镜 -->
  <defs>
    <filter id="blurredStrokeFilter">
      <!-- 提取原图形的Alpha通道（仅保留不透明区域的轮廓） -->
      <feColorMatrix 
        in="SourceAlpha" 
        type="matrix" 
        values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 255 0" 
        result="strokeOnly"
      />
      <!-- 对提取出的轮廓进行高斯模糊 -->
      <feGaussianBlur 
        in="strokeOnly" 
        stdDeviation="3" 
        result="blurredStroke"
      />
      <!-- 将模糊后的描边与原图形合并 -->
      <feMerge>
        <feMergeNode in="blurredStroke"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- 应用滤镜的矩形 -->
  <rect 
    x="50" 
    y="50" 
    width="100" 
    height="100" 
    fill="#ffffff" 
    stroke="#3498db" 
    stroke-width="4" 
    filter="url(#blurredStrokeFilter)"
  />
</svg>

你可以调整这些参数来改变效果：

• stdDeviation：数值越大，模糊程度越高
• stroke-width：控制原描边的粗细，间接影响模糊描边的宽度
• stroke：修改描边的颜色

二、D3.js实现方案 #

用D3.js的话，本质是通过代码动态创建上面的SVG元素，步骤如下：

// 初始化SVG容器
const svg = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);

// 创建defs容器并定义模糊描边滤镜
const defs = svg.append("defs");
const blurFilter = defs.append("filter")
  .attr("id", "blurredStrokeFilter");

// 步骤1：提取描边轮廓
blurFilter.append("feColorMatrix")
  .attr("in", "SourceAlpha")
  .attr("type", "matrix")
  .attr("values", "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 255 0")
  .attr("result", "strokeOnly");

// 步骤2：对轮廓进行模糊
blurFilter.append("feGaussianBlur")
  .attr("in", "strokeOnly")
  .attr("stdDeviation", 3)
  .attr("result", "blurredStroke");

// 步骤3：合并模糊描边与原矩形
blurFilter.append("feMerge")
  .append("feMergeNode").attr("in", "blurredStroke")
  .append("feMergeNode").attr("in", "SourceGraphic");

// 创建并应用滤镜的矩形
svg.append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 100)
  .attr("height", 100)
  .attr("fill", "#ffffff")
  .attr("stroke", "#3498db")
  .attr("stroke-width", 4)
  .attr("filter", "url(#blurredStrokeFilter)");

如果只需要简单的“整个矩形包括描边都模糊”，可以简化滤镜（直接给rect应用feGaussianBlur），但上面的方案是专门针对仅描边模糊的需求设计的，更贴合你的问题。

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