如何仅为SVG心形图标添加黑色边框，避免渲染外部矩形边框？

我懂你的困扰——当你给整个SVG标签加上stroke样式时，那个用来占位的透明矩形也被染上了边框，完全不是你想要的效果。咱们来一步步解决这个问题：

问题根源 #

看你的SVG代码，里面有两个<path>元素：

• 第一个是fill="none"的矩形路径（d="M0 0h24v24H0z"），它是用来撑满viewBox空间的占位元素，保证图标布局的一致性；
• 第二个才是真正的心形路径。

当你给父元素<svg>设置stroke属性时，所有子路径都会继承这个样式，所以那个透明矩形也被加上了边框。

解决方案 #

这里有几种靠谱的方法，你可以根据自己的场景选择：

• 方法1：直接给心形路径添加样式
  把stroke和stroke-width样式从<svg>标签移到第二个（心形）<path>上，这样就只会给心形加边框：

  <svg class="MuiSvgIcon-root-233" focusable="false" viewBox="0 0 24 24" aria-hidden="false" role="presentation" style="fill: rgb(156, 39, 176);">
    <path fill="none" d="M0 0h24v24H0z"></path>
    <path 
      d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      style="stroke: rgba(0, 0, 0, 0.87); stroke-width: 2px;"
    ></path>
  </svg>
  

• 方法2：用CSS精准选择心形路径
  如果不想修改SVG代码，可以用CSS选择器只选中第二个路径，避免影响占位矩形：

  /* 针对你的SVG类，选中第二个path元素 */
  .MuiSvgIcon-root-233 path:nth-child(2) {
    stroke: rgba(0, 0, 0, 0.87);
    stroke-width: 2px;
  }
  

  记得把<svg>标签上的stroke和stroke-width样式删掉，只保留fill属性。

• 方法3：删除占位矩形（谨慎使用）
  如果这个透明占位矩形对你的布局没有作用，可以直接删掉它，但要注意：像Material UI的SvgIcon组件通常依赖这个元素来保证图标尺寸的一致性，所以删除前请确认不会破坏布局。

核心思路 #

本质就是不要给整个SVG设置边框样式，而是把样式仅应用到实际需要加边框的路径元素上，这样就能完美避开那个多余的矩形边框啦。

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