动画增长箭头链接

Question

嗨，我想知道如何像上面那样对 svg 箭头进行动画处理（悬停时）。

我尝试过使用 CSS 变换，但它们也会缩放箭头，这不好。我认为正确的方法是使用 SVG 动画，但我不知道从哪里开始。例如，我将使以下箭头（仅线）增长，箭头相应地移动。

<svg width="600px" height="100px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5"     marker-end="url(#arrow)" />
</svg>

很感谢任何形式的帮助！

Answer 1

您可以像这样使用“响应式”SVG 创建不断增长的箭头。

svg{
  width: 20px;
  height: 20px;
  transition:width 2s ease;
  overflow: visible;
}
svg:hover{
  width: 100px;
}

<svg>
  <defs>
    <marker id="m" markerWidth="4" markerHeight="8" 
    refX="0" refY="1" viewBox="0 0 1 2">
      <polygon points="0,0 1,1 0,2" fill="black"/>
    </marker>
	</defs>
  <line x1="0" y1="50%" x2="100%" y2="50%" 
  stroke-width="2" marker-end="url(#m)" stroke="black"/>
</svg>

有几点需要落实。

• svg没有viewBox（所以它是“响应式”SVG）。
• 箭头线由（根）大小的相对位置定义svg。
• 箭头由marker元素定义。
• 生长动画是由CSS过渡定义的，它对宽度进行动画处理svg。所以，箭头随着svg大小而增长。