我可以用css操纵我的svg路径上的填充值

时间:2017-04-27 01:27:15

标签: css svg

因此,当我将填充设置为红色时,我得到:enter image description here。当我得到填充时,我得到了预期的结果:enter image description here。所以,我正确选择了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>

1 个答案:

答案 0 :(得分:1)

您的代码存在一些问题:

  1. 如果您发布的内容确实是CSS,则嵌套无效。它只允许在SCSS中被预处理为有效CSS(通过连接选择器)。所以使用:
  2. 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;

    3. 这是:

      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>