主页 / 问题 / 1027959
Accepted
MoloF
Asked:2020-09-25 21:15:48 +0000 UTC2020-09-25 21:15:48 +0000 UTC

SVG 将位图对象绑定到路径（path）

  • 772

我找不到有关将对象绑定到路径的信息。

我有以下 SVG 元素：

svg{
  width: 500px;
  height: 500px;
}
svg path{
  fill: none;
  stroke: red;
  stroke-width: 5px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <path id="curve" d="M64,287 C277,329 191,140 445,210" />
    <text style="font-size: 24px;">
        <textPath xlink:href="#curve" startOffset="50%" text-anchor="middle">test text</textPath>
    </text>
    <image href="https://img.icons8.com/ios-filled/50/000000/user-male-circle.png" rx=5 width="50px" height="50px">
        <animateMotion
            dur="5s"
            repeatCount="3"
            rotate="auto"
            restart="whenNotActive">
            <mpath xlink:href="#curve" />
        </animateMotion>
    </image>
</svg>

根据 SO 上的答案创建了我的科学怪人，在那里我找到了附加到路径和图片的文本，这些文本仅通过动画附加。

目标是简单地将图像对象绑定到文本等路径。但是谷歌搜索一个小时没有结果，因此我在这里问这个问题。

html

2 个回答

  1. 要将图像附加到路径，您可以使用标记

    任何 SVG 形状都可以作为标记，包括任何位图。 

     <marker id="User" viewBox="0 0 50 50" refX="0" refY="27"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="50" markerHeight="50" > 
        <image href="https://isstatic.askoverflow.dev/76W3b.png"  width="50px" height="50px"/>
    </marker>

    标记每行有三个着陆位置：

    marker-start, marker-mid,marker-end
    如果需要在行的中间放置一个标记，那么选择 -marker-mid还需要考虑到这个名称的标记放置在断点处，并且可能有几个。

    refX="0" refY="27" - 用于定位标记的属性path

    <style>
svg{
  width: 500px;
  height: 500px;
}
svg path{
  fill: none;
  stroke: red;
  stroke-width: 5px;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <marker id="User" viewBox="0 0 50 50" refX="0" refY="27"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="50" markerHeight="50" > 
		<image href="https://isstatic.askoverflow.dev/76W3b.png"  width="50px" height="50px"/>
	</marker>	
  </defs>
    <path id="curve" d="M64 287C170.5 308 202.3 271.3 239.1 238 276 204.8 318 175 445 210" marker-mid="url(#User)" />
    <text dy="-5" style="font-size: 28px;">
        <textPath xlink:href="#curve" startOffset="40%" text-anchor="middle" >test</textPath>
    </text>
	 <text dy="-5" style="font-size: 28px;">
        <textPath xlink:href="#curve" startOffset="65%" text-anchor="middle" >text</textPath>
    </text>
    
</svg>

    • 假设背景中的红线不适合我们。

      您可以使标记复杂化并使图像不透明，为此我们将在背景中添加一个不透明的圆圈 <circle cx="25" cy="25" r="25" fill="white" />

    • 或者你需要增加图片的大小

      为此，请增加标记的区域：

      markerWidth="70" markerHeight="70" 

    <style>
svg{
  width: 500px;
  height: 500px;
}
svg path{
  fill: none;
  stroke: red;
  stroke-width: 5px;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <marker id="User" viewBox="0 0 50 50" refX="0" refY="27"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="70" markerHeight="70" > 
		 <circle cx="25" cy="25" r="25" fill="white" />
		<image href="https://isstatic.askoverflow.dev/76W3b.png"  width="50px" height="50px"/>
	</marker>	
  </defs>
    <path id="curve" d="M64 287C170.5 308 202.3 271.3 239.1 238 276 204.8 318 175 445 210" marker-mid="url(#User)" />
    <text dy="-5" style="font-size: 28px;">
        <textPath xlink:href="#curve" startOffset="40%" text-anchor="middle" >test</textPath>
    </text>
	 <text dy="-5" style="font-size: 28px;">
        <textPath xlink:href="#curve" startOffset="70%" text-anchor="middle" >text</textPath>
    </text>
    
</svg>

    • 3
  2. Best Answer

    您可以在同一点创建关键点，会发生以下情况：

    svg{
  width: 500px;
  height: 500px;
}
svg path{
  fill: none;
  stroke: red;
  stroke-width: 5px;
}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 160 500 500">
    <path id="curve" d="M64,287 C277,329 191,140 445,210" />
    <text style="font-size: 24px;">
        <textPath xlink:href="#curve" startOffset="50%" text-anchor="middle">test text</textPath>
    </text>
    <image href="https://img.icons8.com/ios-filled/50/000000/user-male-circle.png" width="50px" height="50px" transform="translate(-25,-25)">
        <animateMotion calcMode="linear" keyPoints="0.5; 0.5" keyTimes="0; 1" rotate="auto">
            <mpath xlink:href="#curve" />
        </animateMotion>
    </image>
</svg>

    PS：我也把图片往左上移了50%

    • 2

相关问题