SVG路径定位

Question

我正在制作人脸SVG图像，但是无法将眉毛放在正确的位置，请给予建议。

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg> 

- vaishali kapadia

Answer 1

如果您需要同时移动多个路径，您可以使用g元素并添加translation（非常有用）：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <g transform="translate(40,20)">
  <path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
  </g>
</svg>

或者简单地翻译成路径：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path transform="translate(40,20)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>

这是完整的SVG，包括两个眉毛（使用g进行翻译，然后将第二个相对于g进行翻译）。使用此配置，您只需调整g元素的翻译即可使其上移或下移。

svg g {
  transition: 0.5s;
}

svg:hover g {
  transform: translate(10px, 15px);
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <g transform="translate(10,20)">
  <path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
  <path transform="translate(30,0)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
  
  </g>
</svg>

- Temani Afif

---

谢谢您用不同的方法进行解释 :) - vaishali kapadia

@vaishalikapadia 欢迎 :) 但是我有一个问题：为什么另一个简单复制我的答案的回答被接受了，而不是我的更详细的回答 :) 是否存在任何问题？[你可以自由选择，但只是想知道是否存在任何问题，以便我可以改进它] - Temani Afif

不，你的答案没有任何问题。我对SVG很陌生，也不熟悉在路径d=中使用的值。Tayyab修改了路径值，这使我的代码更容易。没有其他问题。 请帮我看一下https://stackoverflow.com/q/48162219/8169957 - vaishali kapadia

@vaishalikapadia 我也可以修改路径值 :) 但这不是问题所在，所以我只是简单地回答了问题 ;) 如果我做了其他事情，那么与问题无关，因为这也将成为新手和未来人的资源，而且它是关于定位SVG的。 :) - Temani Afif

Answer 2

使用transform属性对路径进行定位，例如：

transform="translate(50,80)" 

请确保不要使用像素（px）

其他变换，如缩放（scale）或旋转（rotate）也是可用的。 查看规范。

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
 </svg> 

- Tayyab

---

谢谢。这很容易 :) - vaishali kapadia