因此,当我将填充设置为红色时,我得到:。当我得到填充时,我得到了预期的结果:。所以,我正确选择了svg和path。但是,我无法操纵笔画值。为什么? (' 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>
答案 0 :(得分:1)
您的代码存在一些问题:
CSS
,则嵌套无效。它只允许在SCSS
中被预处理为有效CSS
(通过连接选择器)。所以使用:svg.logo { ... }
svg.logo .logo-path { ... }
...在CSS中。
如果最终的HTML标记是您在问题中发布的标记,className="logo"
永远不会与.logo {}
匹配。
在元素上使用class="logo"
或在[className="logo"]{}
使用CSS
。显然,className="logo-path"
上的<path>
也是如此。
不要在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>