blocks|key|2983880|text|有许多方法可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2983881|一种方法是“欺骗”一点，并使用<textPath>和箭头字符。|offset|length|style|CODE|2983882|SVG+marker-mid+on+specific+point+on+path|2983883|这有点麻烦，并不是所有浏览器都能可靠地工作，但它可能足以满足您的需要。|2983884|另一种方法是将路径分成两部分(使用De+Casteljau's+algorithm)，并使用<marker>。|2983885|​|2983886|<svg+viewBox="0+200+200+200"+width="400">
++<defs>
++++<marker+id="Triangle"
++++++viewBox="0+0+10+10"+refX="0"+refY="5"+
++++++markerUnits="strokeWidth"
++++++markerWidth="4"+markerHeight="3"
++++++orient="auto">
++++++<path+d="M+0+0+L+10+5+L+0+10+z"+/>
++++</marker>
++</defs>

++<path+d="M+70,260
+++++++++++C+87.5,260+101.5,277.5+115.375,295
+++++++++++C+129.25,312.5+143,330+160,330"++
++++++++style="stroke:+#ff4444;+stroke-width:2;+fill:none;+marker-mid:url(#Triangle)"/>
</svg>|code-block|syntax|javascript|2983887|2983888|还有其他使用Javascript的方法。例如，您可以使用SVGPathElement.getPointAtLength()方法来查找路径中心的坐标。然后在那个位置定位一个三角形。|2983889|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/41105713/svg-marker-mid-on-specific-point-on-path|1|https://stackoverflow.com/questions/18655135/divide-bezier-curve-into-two-equal-halves^0|0|F|A|0|0|14|0|0|0|1A|8|H|O|1|0|0|0|0|S|X|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|J|3|K|5|6|7|1F|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|N|3|O|5|6|7|1M|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1N|8|@]|9|@]|A|$S|T]]|$1|U|3|O|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1P|8|@$D|1Q|E|1R|F|G]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]|15|$5|10|11|12|A|$13|16]]]]

<p>There are a number of ways to do this.</p>

<p>One way is to "cheat" a little and use a <code>&lt;textPath&gt;</code> and an arrow character.</p>

<p><a href="https://stackoverflow.com/questions/41105713/svg-marker-mid-on-specific-point-on-path">SVG marker-mid on specific point on path</a></p>

<p>This is a little hacky, and may not work reliably on all browsers, but it may be good enough for your needs.</p>

<p>Another way is split the path in two (using <a href="https://stackoverflow.com/questions/18655135/divide-bezier-curve-into-two-equal-halves">De Casteljau's algorithm</a>), and use a <code>&lt;marker&gt;</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 200 200 200" width="400"&gt;
  &lt;defs&gt;
    &lt;marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto"&gt;
      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
    &lt;/marker&gt;
  &lt;/defs&gt;

  &lt;path d="M 70,260
           C 87.5,260 101.5,277.5 115.375,295
           C 129.25,312.5 143,330 160,330"  
        style="stroke: #ff4444; stroke-width:2; fill:none; marker-mid:url(#Triangle)"/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>There are other ways using Javascript. For example, you could use the <code>SVGPathElement.getPointAtLength()</code> method to find the coordinates of the centre of the path. Then position a triangle at that location.</p>


blocks|key|2983951|text|实现这一结果的一种方法是退化动画：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2983952|定义标记形状(下面示例中为obj1)|unordered-list-item|offset|length|style|CODE|2983953|将标记定位在曲线的开头(下面是track1；这是您的示例中的路径定义)。|2983954|通过一些特定的设置，指定标记形状沿曲线的动画运动：|2983955|-+Explicit+positioning+along+the+track+using+`keyTimes`,+`keyPoints`+attributes,+limiting+the+range+of+positions+to+exactly+one+point:+the+midpoint+of+the+curve
-+Infinite+duration,+infinite+repeat
-+Auto-rotation+of+the+shape+according+to+the+orientation+of+the+track+curve+(+`rotate`+attribute+)|code-block|syntax|javascript|2983956|​|2983957|实际上，根本没有动画，但形状定位在曲线的中心，正确的方向。|2983958|示例|BOLD|2983959|2983960|<html>
++++<head>
++++++++<title>SVG+object+centered+on+path</title>
++++</head>
++++<body>
++++++++<svg+width="200px"+height="200px"
++++++++++++viewBox="0+0+500+500"
++++++++++++version="1.1"
++++++++++++xmlns="http://www.w3.org/2000/svg"
++++++++++++xmlns:xlink="http://www.w3.org/1999/xlink"
++++++++>
++++++++++++<defs>
++++++++++++++++<path
++++++++++++++++++++id="obj1"
++++++++++++++++++++d="M11.18,0+L-2.5,10+-2.5,-10+Z"
++++++++++++++++++++stroke="black"+stroke-width="1"+fill="green"
++++++++++++++++>
++++++++++++++++</path>
++++++++++++++++<path
++++++++++++++++++++id="track1"
++++++++++++++++++++d="M70,260+C105,260+126,330+160,330"
++++++++++++++++++++stroke="#ff4444"+stroke-width="2"+fill="none"
++++++++++++++++/>
++++++++++++</defs>
++++++++++++<use+xlink:href="#track1"/>
++++++++++++<use+xlink:href="#obj1">
++++++++++++++++<animateMotion
++++++++++++++++++++calcMode="linear"
++++++++++++++++++++dur="infinite"
++++++++++++++++++++repeatCount="infinite"
++++++++++++++++++++rotate="auto"
++++++++++++++++++++keyPoints="0.5;0.5"
++++++++++++++++++++keyTimes="0.0;1.0"
++++++++++++++++>
++++++++++++++++++++<mpath+xlink:href="#track1"/>
++++++++++++++++</animateMotion>
++++++++++++</use>
++++++++</svg>
++++</body>
</html>|2983961|2983962|entityMap^0|0|D|4|0|F|6|0|0|0|0|0|0|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@$E|16|F|17|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|18|8|@$E|19|F|1A|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1D|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1E|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1F|8|@$E|1G|F|1H|G|X]]|9|@]|A|$]]|$1|Y|3|S|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Z|3|10|5|O|7|1J|8|@]|9|@]|A|$P|Q]]|$1|11|3|S|5|6|7|1K|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|13|$]]

<p>One way to achieve the result is a degenerate animation:</p>

<ul>
<li>Define the marker shape (<code>obj1</code> in the example below)</li>
<li>Position the marker at the beginning of the curve (<code>track1</code> below; this is the path definition from your example).</li>
<li><p>Specify an animated motion of the marker shape along the curve with some particular settings:</p>

<ul>
<li>Explicit positioning along the track using <code>keyTimes</code>, <code>keyPoints</code> attributes, limiting the range of positions to exactly one point: the midpoint of the curve</li>
<li>Infinite duration, infinite repeat</li>
<li>Auto-rotation of the shape according to the orientation of the track curve ( <code>rotate</code> attribute )</li>
</ul></li>
</ul>

<p>Effectively there is no animation at all but the shape is positioned at the center of the curve, properly oriented.</p>

<p><strong>Example</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;SVG object centered on path&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;svg width="200px" height="200px"
            viewBox="0 0 500 500"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
        &gt;
            &lt;defs&gt;
                &lt;path
                    id="obj1"
                    d="M11.18,0 L-2.5,10 -2.5,-10 Z"
                    stroke="black" stroke-width="1" fill="green"
                &gt;
                &lt;/path&gt;
                &lt;path
                    id="track1"
                    d="M70,260 C105,260 126,330 160,330"
                    stroke="#ff4444" stroke-width="2" fill="none"
                /&gt;
            &lt;/defs&gt;
            &lt;use xlink:href="#track1"/&gt;
            &lt;use xlink:href="#obj1"&gt;
                &lt;animateMotion
                    calcMode="linear"
                    dur="infinite"
                    repeatCount="infinite"
                    rotate="auto"
                    keyPoints="0.5;0.5"
                    keyTimes="0.0;1.0"
                &gt;
                    &lt;mpath xlink:href="#track1"/&gt;
                &lt;/animateMotion&gt;
            &lt;/use&gt;
        &lt;/svg&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>I have a curved svg line like this</p>

<pre><code>&lt;path d="M70,260 C105,260 126,330 160,330"  
    style="stroke: #ff4444;stroke-width:2; fill:none;"/&gt;
</code></pre>

<p>what I want is to add another svg (like <a href="https://www.flaticon.com/free-icon/play-button_149657" rel="nofollow noreferrer">https://www.flaticon.com/free-icon/play-button_149657</a>) in the middle of my line pointing to the end point.</p>

<p>any ideas?</p>


Add svg icon in the middle of an svg curved line

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有这样一条曲线svg线<path d="M70,260 C105,260 126,330 160,330"      style="stroke: #ff4444;stroke-width:2; fill:none;"/>我想要的是在我的行中间添加另一个svg (如)，指向终点。有什么想法吗？

问在svg曲线中间添加svg图标
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在svg曲线中间添加svg图标EN