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> 

Answer 1

您可以使用gelement 并添加翻译（如果您同时有更多路径移动，则很有用）：

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

或者简单地翻译path：

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

Answer 2

使用transform属性来定位路径，比如

transform="translate(50,80)" 

确保你不使用px

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

transform="translate(50,80)"