css - 我只能用 css 操作我的 svg 路径上的填充值

Question

所以当我将填充设置为红色时，我得到了这个: .当我填满时，我得到了预期的结果: .所以，我正确地选择了 svg 和路径。但是，我无法操纵笔划值。为什么？ ('className' 属性是 reactJs 的东西)

CSS:

   svg.logo {
        height: 26px;
        width: 40px;
        stroke-dasharray: 14;
        stroke-dashoffset: 1;
        transition: all 1s ease-in-out;
        .logo-path {
            width: 26px;
            fill: none;
            stroke: '#E15E94';
            stroke-opacity: 1;
            stroke-width: 2px;
        }
    }

SVG:

  <svg className="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.63 68.2" ><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"> <path className="logo-path" d="M22.83,66.2A22.43,22.43,0,0,1,7.45,60C3.43,56.3,1,51.35.9,46.79.75,38.5,8.31,32.85,15,27.85q2.14-1.6,4.43-3l-.93-.46c-2.92-1.44-5.89-2.9-8.56-4.48A18.47,18.47,0,0,1,6.33,21.4a18.37,18.37,0,0,1-5.1.66,1.25,1.25,0,0,1,0-2.5h.22A15.55,15.55,0,0,0,5.66,19a14.27,14.27,0,0,0,1.77-.66,21.61,21.61,0,0,1-5.05-4.58A8.71,8.71,0,0,1,.46,8.68,8.45,8.45,0,0,1,5.27.85a9.3,9.3,0,0,1,8.56.42,8.68,8.68,0,0,1,4.12,7.17A9.3,9.3,0,0,1,16.84,13a14.69,14.69,0,0,1-4.55,5.43c2.3,1.3,4.81,2.54,7.29,3.75L22,23.35a62,62,0,0,1,17.86-6.29,1.25,1.25,0,1,1,.47,2.46,60,60,0,0,0-15.6,5.23c1.43.75,2.82,1.52,4.1,2.32C33.49,30,44.39,36.72,44.63,46.31c.22,8.88-8.57,19.26-20.67,19.86Zm-.76-40a54.26,54.26,0,0,0-5.59,3.67C10,34.71,3.27,39.74,3.4,46.74c.07,3.9,2.22,8.19,5.75,11.48a20,20,0,0,0,14.68,5.45c10.7-.54,18.48-9.58,18.29-17.31-.2-8.24-10.29-14.5-14.6-17.17C25.86,28.16,24,27.16,22.07,26.18ZM9.14,2.5a6.61,6.61,0,0,0-2.8.61A5.94,5.94,0,0,0,3,8.62a6.19,6.19,0,0,0,1.41,3.62A21.21,21.21,0,0,0,9.93,17a12.67,12.67,0,0,0,4.65-5.09,6.93,6.93,0,0,0,.87-3.38,6.07,6.07,0,0,0-2.89-5.1A6.77,6.77,0,0,0,9.14,2.5Z" /></g></g></svg>

Answer 1

您的代码存在一些问题:

1. 如果你发布的确实是CSS , 嵌套无效。它只允许在 SCSS 中使用它被预处理成有效的 CSS (通过连接选择器)。所以使用:

svg.logo { ...  }
svg.logo .logo-path { ...  }

... 在 CSS 中。

1. 如果最终的 HTML 标记是您在问题中发布的标记，className="logo"永远不会被 .logo {} 匹配.
   要么使用 class="logo"在元素上或 [className="logo"]{}在CSS .显然，className="logo-path" 也是如此。 ，关于 <path> .

2. 不要在 CSS 中引用颜色值。使用 stroke:#E15E94;

这里是:

svg.logo {
  width: 40px;
  stroke-dasharray: 14;
  stroke-dashoffset: 1;
  transition: all 1s ease-in-out;
}

svg.logo .logo-path {
  stroke:#E15E94;
  width: 26px;
  fill: none;
  stroke-opacity: 1;
  stroke-width: 2px;
}

<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.63 68.2">
<path class="logo-path" d="M22.83,66.2A22.43,22.43,0,0,1,7.45,60C3.43,56.3,1,51.35.9,46.79.75,38.5,8.31,32.85,15,27.85q2.14-1.6,4.43-3l-.93-.46c-2.92-1.44-5.89-2.9-8.56-4.48A18.47,18.47,0,0,1,6.33,21.4a18.37,18.37,0,0,1-5.1.66,1.25,1.25,0,0,1,0-2.5h.22A15.55,15.55,0,0,0,5.66,19a14.27,14.27,0,0,0,1.77-.66,21.61,21.61,0,0,1-5.05-4.58A8.71,8.71,0,0,1,.46,8.68,8.45,8.45,0,0,1,5.27.85a9.3,9.3,0,0,1,8.56.42,8.68,8.68,0,0,1,4.12,7.17A9.3,9.3,0,0,1,16.84,13a14.69,14.69,0,0,1-4.55,5.43c2.3,1.3,4.81,2.54,7.29,3.75L22,23.35a62,62,0,0,1,17.86-6.29,1.25,1.25,0,1,1,.47,2.46,60,60,0,0,0-15.6,5.23c1.43.75,2.82,1.52,4.1,2.32C33.49,30,44.39,36.72,44.63,46.31c.22,8.88-8.57,19.26-20.67,19.86Zm-.76-40a54.26,54.26,0,0,0-5.59,3.67C10,34.71,3.27,39.74,3.4,46.74c.07,3.9,2.22,8.19,5.75,11.48a20,20,0,0,0,14.68,5.45c10.7-.54,18.48-9.58,18.29-17.31-.2-8.24-10.29-14.5-14.6-17.17C25.86,28.16,24,27.16,22.07,26.18ZM9.14,2.5a6.61,6.61,0,0,0-2.8.61A5.94,5.94,0,0,0,3,8.62a6.19,6.19,0,0,0,1.41,3.62A21.21,21.21,0,0,0,9.93,17a12.67,12.67,0,0,0,4.65-5.09,6.93,6.93,0,0,0,.87-3.38,6.07,6.07,0,0,0-2.89-5.1A6.77,6.77,0,0,0,9.14,2.5Z" />
</svg>