我可以操縱我的svg的路徑只填充值與css

因此，當我設置填充紅色我得到這個：。而當我得到填充沒有，我得到這個預期：。所以，我正確選擇了svg和路徑。但是，我無法操作筆畫值。爲什麼？（在 '類名' 屬性是reactJs東西）我可以操縱我的svg的路徑只填充值與css

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>

來源

2017-04-27 Sebastian

有幾個問題與您的代碼：

如果你發佈確實是CSS，嵌套無效。它只在SCSS中被允許，它被預處理成有效的CSS（通過連接選擇器）。因此，使用：

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

...在CSS。

如果最終的HTML標記你在你的問題貼一個，className="logo"將永遠不會被.logo {}匹配。
要麼在元素上使用class="logo"要麼在CSS中使用[className="logo"]{}。顯然，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>

來源

2017-04-27 02:16:55

我可以操縱我的svg的路徑只填充值與css

回答

相關問題