html – SVG路径定位

概述我正在面对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-w 我正在面对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>

解决方法 使用transform属性来定位路径,例如

transform="translate(50,80)"

确保您不使用px

其他变换如缩放或旋转也可用. 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" transform="translate(40,17)" fill="none" stroke="#000" stroke-wIDth="1.5px" /> </svg>

总结

以上是内存溢出为你收集整理的html – SVG路径定位全部内容，希望文章能够帮你解决html – SVG路径定位所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。