css - 动画生长箭头链接

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)。
• 箭头线由 (root) svg 大小的相对位置定义。
• 箭头由 marker 元素定义。
• 生长动画由 CSS transition 定义，它对 svg 的宽度进行动画处理。因此，箭头随 svg 大小增长。