主页 / coding / 问题 / 79055693
Accepted
Dorian
Asked: 2024-10-05 04:02:36 +0800 CST

如何正确地将这个 svg 中的“Y”垂直和水平居中？

  • 772

我有这个 svg，它基本上是多边形内的“Y”，但我无法设法将多边形内的“Y”垂直和水平居中，这里是 svg：

        <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
            <title>Loader Logo</title>
            <g>
                <g id="Y" transform="translate(11.000000, 5.000000)">
                    <path
                          d="m 35,37.018555 c 3.686193,8.066969 7.372385,16.133937 11.058578,24.200905 0,6.557364 0,13.114728 0,19.672093 2.577904,0.07335 5.155807,0.146697 7.733711,0.220046 0,-6.753756 0,-13.507511 0,-20.261265 4.224292,-8.815029 8.450947,-17.628029 12.673514,-26.444539 -2.882118,-0.08201 -5.764235,-0.16401 -8.646353,-0.246014 -2.621719,5.556806 -5.242844,11.114115 -7.86433,16.671119 -2.596764,-5.705351 -5.191816,-11.412041 -7.78969,-17.116521 -2.929616,-0.08336 -5.859232,-0.166714 -8.788847,-0.250069 0.541139,1.184749 1.082278,2.369497 1.623417,3.554245 z"
                          fill="#64ffda"/>
                </g>
                <path id="outline"
                    stroke="#64ffda"
                    strokeWidth="5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
            fill="none"
                    d="M 50, 5
                  L 11, 27
                  L 11, 72
                  L 50, 95
                  L 89, 73
                  L 89, 28 z"
                />
            </g>
        </svg>

我尝试了所有方法，从使用 CSS 到尝试绘制另一个 Y 居中的 svg，但都不起作用

svg

2 个回答

  1. 注意：你的大多数 SVG 属性都是错误的，SVG属性不是CamelCased

    对于动态定位任何事物：

    您可以通过在路径上设置动画来精确定位元素

    文档：https ：//developer.mozilla.org/en-US/docs/Web/SVG/Element/mpath

    <svg viewBox="0 0 100 100" style="height:180px">
  <path id="Y" visibility="hidden" fill="#64ffda" d="M-15 -20c3.7 8.1 7.4 16.1 11.1 24.2 0 6.6 0 13.1 0 19.7 2.6.1 5.2.1 7.7.2 0-6.8 0-13.5 0-20.3 4.2-8.8 8.5-17.6 12.7-26.4-2.9-.1-5.8-.2-8.6-.2-2.6 5.6-5.2 11.1-7.9 16.7-2.6-5.7-5.2-11.4-7.8-17.1-2.9-.1-5.9-.2-8.8-.3.5 1.2 1.1 2.4 1.6 3.6z">
    <set attributeName="visibility" from="hidden" to="visible" begin="0s" />
    <animateMotion keyPoints="0;.5" dur="1s" fill="freeze" keyTimes="0;1" calcMode="linear">
      <mpath href="#track" />
    </animateMotion>
  </path>
  <path stroke="#64ffda" stroke-width="2" stroke-linejoin="round" fill="none" d="M50 5L11 27L11 72L50 95L89 73L89 28z"/>
  <circle cx="89" cy="28" fill="red" r="4" />
  <circle cx="11" cy="72" fill="green" r="4"/>
  <path id="track" d="M89 28L11 72" stroke="blue" Xvisibility="hidden"></path>
</svg>

    • 我降低了你的 Y 路径精度：https: //yqnn.github.io/svg-path-editor/# )

    • SVG 不知道 Y 轴的中心在哪里

      • 通过调整M-15 -20值将 Y 定位在红色圆圈上方。效果与应用) 相同
        transform="translate(x,y)"
      • 设置animateMotion keyPoints="0;.001"为“禁用”移动

    • visibility="hidden"是为了防止 FOUC（无样式内容的 Flash）

    • keyPoints="0;.5"在动画结束时将其设置为 #track mpath 的中间位置

    • 设置dur="1s"为dur="0.001s"“即时显示”

    • 将描边设置#track为visibility="hidden"

    • 移除引导圈

    • 完毕

    • 2
  2. Best Answer

    原因是你使用了错误的transform。我更新了你的svg代码，现在可以按你想要的方式工作了。

    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
    <title>Loader Logo</title>
    <g>
        <g id="Y" transform="translate(0, -5)">
            <path d="m 35,37.018555 c 3.686193,8.066969 7.372385,16.133937 11.058578,24.200905 0,6.557364 0,13.114728 0,19.672093 2.577904,0.07335 5.155807,0.146697 7.733711,0.220046 0,-6.753756 0,-13.507511 0,-20.261265 4.224292,-8.815029 8.450947,-17.628029 12.673514,-26.444539 -2.882118,-0.08201 -5.764235,-0.16401 -8.646353,-0.246014 -2.621719,5.556806 -5.242844,11.114115 -7.86433,16.671119 -2.596764,-5.705351 -5.191816,-11.412041 -7.78969,-17.116521 -2.929616,-0.08336 -5.859232,-0.166714 -8.788847,-0.250069 0.541139,1.184749 1.082278,2.369497 1.623417,3.554245 z"
                          fill="#64ffda"/>
        </g>
        <path id="outline"
            stroke="#64ffda"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
            d="M 50, 5
               L 11, 27
               L 11, 72
               L 50, 95
               L 89, 73
               L 89, 28 z"
            />
    </g>
</svg>

    • 0

相关问题