Question

我想得到一个＆＃39; T形＆＃39;在SVG Circle的顶部，但似乎无法正确显示它。我使用了 stroke-dasharray 来分割圆圈，但是我只能将它们放在右侧，理想情况下是将它们放在顶部，从而创造出来。 T形＆＃39;。

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

my.local.service.com

Answer 1

更新：删除了错误的解释并将其替换为更正的信息

＆＃34;开始＆＃34;圆圈位于3点钟位置。所以要定位＆＃34; T＆＃34;在顶部圆圈周围3/4处，需要从较长的第一个虚线段开始。

＆＃13;

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

＆＃13;

另一种选择是使用变换将圆圈旋转到正确的位置，但这通常比它的价值更麻烦。

或者您可以将<circle>替换为<path>。然后让路径从圆圈中的稍后位置开始。例如，我在下面的示例中从左侧（9 o＆＃39;时钟）开始。

＆＃13;

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

＆＃13;

SVG将dasharray定位在顶部

1 个答案: