在SVG的线条元素的一部分上应用CSS

Question

我正在创建几条水平线和垂直线，并且我想绘制一段从a点到b点的线。我可以对同一个creting多行，但可以使用一些svg或d3库，你可以保持相同的行，只是在不同的css中绘制该行的一部分？

Answer 1

您可以使用渐变的笔触

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients --> 
 

 
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="Gradient1"> 
 
     <stop class="stop1" offset="0%" /> 
 
     <stop class="stop2" offset="50%" /> 
 
     <stop class="stop3" offset="100%" /> 
 
    </linearGradient> 
 
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> 
 
     <stop offset="0%" stop-color="red" /> 
 
     <stop offset="50%" stop-color="black" stop-opacity="0" /> 
 
     <stop offset="100%" stop-color="blue" /> 
 
    </linearGradient> 
 
    <style type="text/css"> 
 
     <![CDATA[ #rect1 { 
 
     fill: url(#Gradient1); 
 
     } 
 
     .stop1 { 
 
     stop-color: red; 
 
     } 
 
     .stop2 { 
 
     stop-color: black; 
 
     stop-opacity: 0; 
 
     } 
 
     .stop3 { 
 
     stop-color: blue; 
 
     } 
 
     ]]> 
 
    </style> 
 
    </defs> 
 

 
    <line x1="20" y1="100" x2="100" y2="20" stroke="url(#Gradient2)" /> 
 
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)" /> 
 

 
</svg>