SVG路径定位 [英] SVG path positioning

问题描述

我正在制作SVG脸.无法将眉毛放在适当的位置.请指教.

I am making face SVG. Unable to set eyebrow on proper place. Please advice.

<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> 

推荐答案

使用transform属性定位路径，例如

Use the transform attribute to position the path, like

transform="translate(50,80)" 

确保您不使用 px

还可以使用其他转换，例如scale或rotate. 请参阅规格.

Other transformations like scale or rotate are also available. See the specs.

<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> 

这篇关于SVG路径定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！