我有一个用箭头表示直线现有路径：<path {...lineProps} id={id} />
它看起来像：
是否有机会在当前链接的中间添加下一个SVG：
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</svg>它看起来像：
最后它应该看起来像：
1条答案
按热度按时间bvjveswy1#
正如@AKX所评论的，你需要找到路径中间的点。你可以使用getTotalLength和getPointAtLength方法来完成。
至于标签，你可以把它放在一个符号里面，用
<use>来使用这个符号。use元素可以有一个x和y属性，即路径中间点的x和y。为了使use元素围绕这个点居中，你还需要把use元素向后平移一半的宽度和高度第一个