在SVG

时间:2016-09-30 02:03:45

标签: d3.js svg

我正在创建几条水平线和垂直线,我想绘制一条线,从点a到点b再用其他颜色。我可以使用相同的cret多行但是可以使用一些svg或d3库来完成,你可以保持相同的行,只是在不同的CSS中绘制该行的段部分?

1 个答案:

答案 0 :(得分:0)

您可以为笔画使用渐变



<!-- 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>
&#13;
&#13;
&#13;