html - SVG 无法正确显示

Question

这是我的 SVG 的外观。

下面是我在网络中编码时的外观。

我不太确定这里发生了什么。任何帮助将非常感激。下面是我的 SVG 代码。提前致谢。

<svg class="product-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
  <defs>
    <style>.cls-1,.cls-2{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5{stroke:#333;stroke-miterlimit:10;}.cls-1{stroke-width:3.79px;}.cls-2{stroke-width:5px;}.cls-3{fill:#333;}.cls-4,.cls-5{fill:none;stroke-linecap:round;}.cls-4{stroke-width:3px;}.cls-5{stroke-width:2.27px;}</style>
  </defs>
  <circle class="cls-1" cx="460.7" cy="282.87" r="48.53"/>
  <circle class="cls-2" cx="519.36" cy="325.31" r="64.01"/>
  <rect class="cls-3" x="262.17" y="399.01" width="384.48" height="31.32" rx="15.66"/>
  <path class="cls-3" d="M284.36,441.13,301.1,552.91a45,45,0,0,0,44.51,38.34h217.6a45,45,0,0,0,44.5-38.34l16.74-111.78Z"/>
  <path class="cls-3" d="M453,392.53h-82.8c0-9.35,3.12-21.17,8.36-28.06a0,0,0,0,0,0,0,41,41,0,0,1,32.67-16.19H412a40.87,40.87,0,0,1,29,12C448.43,367.71,453,381.19,453,392.53Z"/>
  <path class="cls-3" d="M436.92,302.87a13.9,13.9,0,0,1-15.47,21.65l-8.06,17.27L410.85,284l-3.54,55.67-7.06-15.13a13.92,13.92,0,0,1-4.44.74,13.53,13.53,0,0,1-1.81-.12,13.9,13.9,0,0,1-9.22-22.27q-.36-.31-.69-.66a16.43,16.43,0,0,1,11.25-28,17.85,17.85,0,0,1,32.62.12,16.44,16.44,0,0,1,9,28.52Z"/>
  <path class="cls-3" d="M366.71,392.53H288.56l-4-7.39a41.4,41.4,0,0,1,24.28-53.27c.82-.31,1.64-.59,2.47-.84a41.62,41.62,0,0,1,26.77.94C364.37,341.79,366.71,392.53,366.71,392.53Z"/>
  <path class="cls-3" d="M391.58,348.27c-14.7,3.83-23,19.65-23,19.65s-9.68-51-51.63-41.93c1.2-6.61,2.68-12.13,4.41-14.4a38.86,38.86,0,0,1,31-15.34H353a38.71,38.71,0,0,1,25.09,9.18q.33.35.69.66A13.9,13.9,0,0,0,388,328.36C389.39,335,390.92,342.11,391.58,348.27Z"/>
  <path class="cls-3" d="M381.81,241.65a15.59,15.59,0,0,0-13.64-15.47,16.94,16.94,0,0,0-30.93-.12,15.57,15.57,0,0,0-10,27.15,13.18,13.18,0,0,0,10.45,21.23,13.32,13.32,0,0,0,4.21-.7l6.69,14.34L352,235.31l2.41,54.79L362,273.74a13.19,13.19,0,0,0,14.66-20.53A15.5,15.5,0,0,0,381.81,241.65Z"/>
  <path class="cls-3" d="M317.43,267.16a16.46,16.46,0,0,0-19.2-10.26,17.86,17.86,0,0,0-30.6,11.31,16.43,16.43,0,0,0,.14,30.53,13.9,13.9,0,0,0,18.17,17.11,13.67,13.67,0,0,0,3.9-2.25l11.91,11.71-16.18-53.39,22.63,53.26,1.5-19a13.7,13.7,0,0,0,4.41-.86,13.92,13.92,0,0,0,2.5-24.84A16.38,16.38,0,0,0,317.43,267.16Z"/>
  <path class="cls-3" d="M559.1,334.45a52.33,52.33,0,0,0-10.77,1.11,11.64,11.64,0,0,0-9.16,10.58,20.41,20.41,0,0,0,7.43-2.49,1.5,1.5,0,0,1,1.49,2.6,23.18,23.18,0,0,1-23.09,0,1.5,1.5,0,1,1,1.49-2.6,20.66,20.66,0,0,0,5,2,11.73,11.73,0,0,0-9.72-10.5,53,53,0,0,0-8.78-.73,52.3,52.3,0,0,0-52,58.08H611.1a54.68,54.68,0,0,0,.32-5.76A52.31,52.31,0,0,0,559.1,334.45Z"/>
  <path class="cls-4" d="M535.58,351.74a54.85,54.85,0,0,1,2.64-23.52A52.17,52.17,0,0,1,543,318.16"/>
  <path class="cls-3" d="M533.18,301.9c-.09-.11-.19-.21-.28-.31-7.58-8.15-15.6-5.68-23.23-5.15a28.59,28.59,0,0,1-3.33.08c-20.51-.81-21-14.8-21-14.8s-6.13,24,10.4,40.7c13.35,13.48,30.33,10,38,1-18.15-2.45-25.58-9.82-25.58-9.82s5.16,1.91,16.59,3.35c2.19.27,4.37.44,6.46.53a32.26,32.26,0,0,1,5.28.63S537.19,306.68,533.18,301.9Z"/>
  <polygon class="cls-3" points="372.55 318.16 372.31 318.16 372.44 317.77 372.55 318.16"/>
  <polygon class="cls-3" points="357.37 317.77 357.5 318.16 357.26 318.16 357.37 317.77"/>
  <path class="cls-4" d="M524.8,274.42a54.68,54.68,0,0,0-2.64-23.52,52.15,52.15,0,0,0-4.75-10.06"/>
  <path class="cls-3" d="M527.2,224.58c.09-.11.19-.21.29-.31,7.58-8.15,15.59-5.68,23.22-5.15a28.59,28.59,0,0,0,3.33.08c20.52-.81,21-14.8,21-14.8s6.13,24-10.39,40.7c-13.35,13.48-30.34,10-38,1,18.15-2.45,25.58-9.82,25.58-9.82s-5.16,1.91-16.59,3.35c-2.19.27-4.36.44-6.46.53a32,32,0,0,0-5.27.63S523.19,229.36,527.2,224.58Z"/>
  <path class="cls-5" d="M463.65,244.29a41.6,41.6,0,0,1,2-17.84,38.84,38.84,0,0,1,3.61-7.62"/>
  <path class="cls-3" d="M461.83,206.49l-.22-.23c-5.75-6.18-11.82-4.31-17.61-3.9a23.68,23.68,0,0,1-2.52.06c-15.56-.62-15.93-11.23-15.93-11.23s-4.64,18.22,7.89,30.86c10.12,10.22,23,7.58,28.82.77-13.76-1.85-19.4-7.45-19.4-7.45s3.92,1.45,12.58,2.54c1.66.21,3.31.34,4.9.41a23.37,23.37,0,0,1,4,.48S464.87,210.12,461.83,206.49Z"/>
</svg>

标签： htmlsvg

Answer 1

移除 svg 元素中的 class 属性值。看起来您已经为该类定义了一种样式，这导致 svg 具有指定的边框。

所以：

<svg class=“product-icon”

变成

<svg class=“”

或者，您可以将课程留在那儿并重新访问产品图标样式定义并进行更正。不确定它是由什么制成的，但如果指定了边框属性，则可能会删除它...

还要检查您是否有任何其他针对 svg 元素的样式规则...

检查开发人员工具中的 svg 元素并检查正在应用的样式。实际的 svg 代码是正确的。