Question

我正在面对SVG。无法在适当的位置设置眉毛。请指教。

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

或简单地翻译path：

＆＃13;

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

＆＃13;

以下是带有眉毛的完整SVG（使用g进行翻译，然后将第2个翻译为g）。使用此配置，您只需调整g元素的转换（如果希望它位于较低的

）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

transform="translate(50,80)"

确保您不使用 px

其他转换例如scale或rotate也可用。 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路径定位

2 个答案: