SVG 定位 dasharray 在顶部

Question

我想在 SVG 圆的顶部添加一个 'T shape'，但似乎无法正确显示。我使用 stroke-dasharray 来分割圆圈，但是我只能将它们放在右侧，理想情况下希望将它们放在顶部，从而创建 'T shape'.

有人可以指导我正确的方向吗？

<body style="background:#f3f3f3;margin: 0 auto;  padding: 0;width:100%; height:500px;">
    <svg width="100%" max-height="400" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 380 320" enable-background="new 0 0 404.7 354" id="logo"> 
        <!-- Backing Circle -->
        <circle stroke-opacity="0.4" r="42%" cy="50%" cx="50%" stroke-width="0" stroke="none" fill="#000" fill-opacity="0" style="fill-opacity: 0.7;"></circle>
        <!-- Inner circle - opacity 0.4 -->
        <path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M 127, 160 m -77.5, 0 a 79,79 0 1,0 281,0 a 79,79 0 1,0 -281,0" style="opacity:0.4"></path>
        <!-- 'T' Line -->
        <path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="0" y1="0" x2="0" y2="0" d="M190,21.5L190,220" style="stroke-dashoffset: 0px;"></path>

        <!-- Inner circle - opacity 1 -->
        <circle stroke-opacity="1" r="40%" id="circleAni" cy="50%" cx="50%" stroke-width="4" stroke="#ffffff" fill="none" data-svg-origin="200 200" style="transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; stroke-dashoffset: 0px; stroke-dasharray: 110.69px, 60.38px, 664.16px, 60.38px, 110.69px; transform-origin: 0px 0px 0px;"></circle>
    </svg>
</body>

Answer 1

更新：删除了错误的解释并用更正的信息替换了它

圆的"start"在3点钟位置。因此，要将 "T" 段定位在顶部圆圈的 3/4 处，您需要从第一个长破折号段开始。

    <svg width="100%" max-height="400" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 380 320" enable-background="new 0 0 404.7 354" id="logo"> 
        <!-- Backing Circle -->
        <circle stroke-opacity="0.4" r="42%" cy="50%" cx="50%" stroke-width="0" stroke="none" fill="#000" fill-opacity="0" style="fill-opacity: 0.7;"></circle>
        <!-- Inner circle - opacity 0.4 -->
        <path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M 127, 160 m -77.5, 0 a 79,79 0 1,0 281,0 a 79,79 0 1,0 -281,0" style="opacity:0.4"></path>
        <!-- 'T' Line -->
        <path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="0" y1="0" x2="0" y2="0" d="M190,21.5L190,220" style="stroke-dashoffset: 0px;"></path>

        <!-- Inner circle - opacity 1 -->
        <circle stroke-opacity="1" r="40%" id="circleAni" cy="50%" cx="50%" stroke-width="4" stroke="#ffffff" fill="none" data-svg-origin="200 200" 
            
        style="transform: matrix(1, 0, 0, 1, 0, 0);
               opacity: 1;
               stroke-dashoffset: 0;
               stroke-dasharray: 547, 60.38, 110.69, 60.38, 664.16;
               transform-origin: 0px 0px 0px;"></circle>
    </svg>

另一种方法是使用变换将圆圈旋转到正确的位置，但这往往比它值得的麻烦更多。

或者您可以将 <circle> 替换为 <path>。然后让路径从圆圈中较晚的位置开始。例如，在下面的示例中，我从左侧（9 点）开始。

    <svg width="100%" max-height="400" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 380 320" enable-background="new 0 0 404.7 354" id="logo"> 
        <!-- Backing Circle -->
        <circle stroke-opacity="0.4" r="42%" cy="50%" cx="50%" stroke-width="0" stroke="none" fill="#000" fill-opacity="0" style="fill-opacity: 0.7;"></circle>
        <!-- Inner circle - opacity 0.4 -->
        <path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M 127, 160 m -77.5, 0 a 79,79 0 1,0 281,0 a 79,79 0 1,0 -281,0" style="opacity:0.4"></path>
        <!-- 'T' Line -->
        <path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="0" y1="0" x2="0" y2="0" d="M190,21.5L190,220" style="stroke-dashoffset: 0px;"></path>

        <!-- Inner circle - opacity 1 -->
     <path d="M 50,160 A 140,140 0 0 1 330,160 A 140,140 0 0 1 50,160 Z"
           stroke-opacity="1"
           r="140"
           id="circleAni"
           cy="160"
           cx="190"
           stroke-width="4"
           stroke="#ffffff"
           fill="none"
           data-svg-origin="200 200"
           style="opacity: 1;
                  stroke-dashoffset: 0px;
                  stroke-dasharray: 104.19px, 60.38, 110.69, 60.38, 664.16;
                  transform-origin: 0px 0px 0px;"/>
    </svg>

SVG 定位 dasharray 在顶部

SVG positioning dasharray at top

arrays

svg

shape

svg-animate