css - SVG - 虽然我正在使用笔画属性，但笔画宽度不起作用

Question

我正在尝试使笔画宽度变细，但它不起作用。我试过 stroke-width 但没有用。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 <g stroke="black" fill="#3F474E" stroke-width="0.2">
  <path d="m488 248h-32v-18.800293c7.7072754 1.8276368 15.7418213 2.800293 24 2.800293h8v-16h-8c-48.5234375 0-88-39.4765625-88-88 0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88s-88-39.4765625-88-88c0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88h-8v16h8c8.2581787 0 16.2926636-.9726563 24-2.800293v18.800293h-32c-4.418457 0-8 3.5820313-8 8v32c0 4.4179688 3.581543 8 8 8h96v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h176v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h96c4.418457 0 8-3.5820313 8-8v-32c0-4.4179687-3.581543-8-8-8zm-48 0h-16v-32.3981934c5.0522461 3.2409668 10.4038086 6.0529785 16 8.3935547zm-32-45.026123v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-144 64.637207v-32.3981934c5.0522461 3.2409668 10.4038696 6.0529785 16 8.3935547v24.0046387zm32-18.800293c5.1953735 1.2319336 10.5383911 2.078125 16 2.4956055v16.3046875h-16zm32 2.4956055c5.4616699-.4174805 10.8046875-1.2636719 16-2.4956055v18.800293h-16zm32-7.6999512c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-112-21.0214843v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-48 40.6325683c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-40 56.0046387v-16h88v16zm140.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm32-48v-16h176v16zm228.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm120-48h-88v-16h88z" stroke="black" stroke-width="0.2"></path>
 </g>
</svg>

标签： csssvg

Answer 1

这是可行的，但是当您使用 stroke-width = 0.2 时，它的颜色会与填充颜色合并。尝试使用更浅的填充颜色。当您使用 stroke-width < 1 时，绘图引擎会使用更浅的颜色来绘制子像素对象

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 <g stroke="black" fill="white" stroke-width="0.2">
  <path d="m488 248h-32v-18.800293c7.7072754 1.8276368 15.7418213 2.800293 24 2.800293h8v-16h-8c-48.5234375 0-88-39.4765625-88-88 0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88s-88-39.4765625-88-88c0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88h-8v16h8c8.2581787 0 16.2926636-.9726563 24-2.800293v18.800293h-32c-4.418457 0-8 3.5820313-8 8v32c0 4.4179688 3.581543 8 8 8h96v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h176v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h96c4.418457 0 8-3.5820313 8-8v-32c0-4.4179687-3.581543-8-8-8zm-48 0h-16v-32.3981934c5.0522461 3.2409668 10.4038086 6.0529785 16 8.3935547zm-32-45.026123v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-144 64.637207v-32.3981934c5.0522461 3.2409668 10.4038696 6.0529785 16 8.3935547v24.0046387zm32-18.800293c5.1953735 1.2319336 10.5383911 2.078125 16 2.4956055v16.3046875h-16zm32 2.4956055c5.4616699-.4174805 10.8046875-1.2636719 16-2.4956055v18.800293h-16zm32-7.6999512c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-112-21.0214843v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-48 40.6325683c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-40 56.0046387v-16h88v16zm140.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm32-48v-16h176v16zm228.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm120-48h-88v-16h88z"></path>
 </g>
</svg>