SVG path positioning | 易学教程

问题

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>

回答1:

Use the transform attribute to position the path, like

transform="translate(50,80)"

Make sure you don't use px

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>

回答2:

You may use g element and add translation (useful if you will have more path to move at the same time):

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

Or simply translation on 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>

Here is the full SVG with both eyebrow (translation for both using g and then translate the 2nd one relatively to g). With this configuration you have to simply adjust the translation of g element if want it upper of lower

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>

来源：https://stackoverflow.com/questions/48151772/svg-path-positioning

标签

html

css

svg

path