主页 / 问题 / 888032
Accepted
stiv
Asked:2020-10-02 13:54:34 +0000 UTC2020-10-02 13:54:34 +0000 UTC

如何在单击时更改 svg 中的路径属性？

  • 772

点开的时候，把线加宽一点（不管多少，主要是要明白怎么做才能更好）

<svg width=0 height=0>
  <defs>
  <symbol id="line">
  <g transform="translate(-1.3,-227.2)">
    <path
       d="M 0.023821,295.48809 C 103.37996,270.41292 366.08908,254.16145 314.47619,259.20238 l -1.5119,-31.75 C 203.78198,275.16696 100.62384,269.86897 1.511911,228.96429 Z" fill="#00d6d6" />
    </g>
  </symbol>
  </defs>
</svg>

<div class="column">
  <span class="open">
  Open
</span>
  <svg viewBox="0 0 304 69">
  <use xlink:href="#line"/></svg>
</div>

javascript

1 个回答

  1. Best Answer

    最简单的就是改变path标签的d属性值：

    $('.open').click(function(){
   $('path').attr('d', 'M 0.023821,295.48809 C 503.37996,270.41292 1966.08908,254.16145 314.47619,259.20238 l -1.5119,-31.75 C 203.78198,275.16696 100.62384,269.86897 1.511911,228.96429 Z');
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width=0 height=0>
  <defs>
  <symbol id="line">
  <g transform="translate(-1.3,-227.2)">
    <path
       d="M 0.023821,295.48809 C 103.37996,270.41292 366.08908,254.16145 314.47619,259.20238 l -1.5119,-31.75 C 203.78198,275.16696 100.62384,269.86897 1.511911,228.96429 Z" fill="#00d6d6" />
    </g>
  </symbol>
  </defs>
</svg>

<div class="column">
  <span class="open">
  Open
</span>
  <svg viewBox="0 0 304 69">
  <use xlink:href="#line"/></svg>
</div>

    • 0

相关问题