SVG曲線文本里面的路徑

Question

你好傢伙我創建了一個與SVG 5段的圓圈，即時嘗試添加段內的文本，但我不能讓它正常工作。

這是林試圖做 Text curved and centered inside the path

這就是即時得到： enter image description here

這是到目前爲止我的代碼，有什麼建議？

<svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> 
    <a xlink:href=""> 
     <path class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' > 
     </path> 
     <text font-family="Verdana" font-size="15" stroke="red";> 
     <textPath xlink:href="#f1"> 
      We go up, then we go down, then up again 
     </textPath> 
     </text> 
    </a> 
    <a xlink:href="" > 
     <path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path> 
    </a> 
    <a xlink:href="" > 
     <path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> 
    </a> 
    <a xlink:href="" > 
     <path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> 
    </a> 
    <a xlink:href="" > 
     <path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> 
    </a> 
    <circle class="cente" cx='55' cy='55' r='35' ></circle> 
    <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> 
</svg> 

Answer 1

您目前正在使用其中一個圓段路徑作爲文本的路徑。見下文。

path, circle { 
 
    fill: transparent; 
 
    stroke: black; 
 
}

<svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> 
 
    <a xlink:href=""> 
 
     <path class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' > 
 
     </path> 
 
     <text font-family="Verdana" font-size="4" fill="red";> 
 
     <textPath xlink:href="#f1"> 
 
      We go up, then we go down, then up again 
 
     </textPath> 
 
     </text> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> 
 
    </a> 
 
    <circle class="cente" cx='55' cy='55' r='35' ></circle> 
 
    <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> 
 
</svg>

很明顯，你這條道路是不恰當的。您需要添加一條從段的左側到段的右側的新的，更簡單的路徑。您需要爲每個細分受衆羣完成此操作。

或者，您可以使用形成整個圓的路徑，然後爲每個段重新使用該路徑。但是爲每個屬性指定不同的startOffset屬性，對應於它們在圓周的位置。

在以下示例中，創建與40

<path id="clockwise" d="M55,15 A40,40 0 0 1 55,95 A40,40 0 0 1 55,15"/> 

然後，我使用相同的路徑爲每個段的半徑的圓形路徑。爲了使每個片段中的文本容易​​居中，我使用屬性text-anchor="middle"，這將導致文本以我們指定的startOffset爲中心。

我們可以使用百分比來指定我們想要文本開始的循環路徑的距離。 0％將是路徑的開始（也是第一個段的左側），20％將是第二個段的開始，等等。

因此，對於第一個段，我們希望文本居中在一半的地方，所以我們使用startOffset="10%"。對於後面的細分市場，我們會使用「30％」，「50％」等。

在下面的例子中，我已經完成了前三個細分市場。我會留下最後兩個給你完成。

要了解有關<textPath>如何工作的更多信息，請參閱read the relevant section of the SVG specification。

path, circle { 
 
    fill: transparent; 
 
    stroke: black; 
 
}

<svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> 
 
    <defs> 
 
    <!-- Circular path with a radius of 40 --> 
 
    <path id="clockwise" d='M55,15 A40,40 0 0 1 55,95 A40,40 0 0 1 55,15' 
 
      transform="rotate(-54,55,55)"/> 
 
    </defs> 
 
    <a xlink:href=""> 
 
     <path class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' > 
 
     </path> 
 
     <text font-family="Verdana" font-size="6" fill="red";> 
 
     <textPath xlink:href="#clockwise" startOffset="10%" text-anchor="middle"> 
 
      Cloud Marina 
 
     </textPath> 
 
     </text> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path> 
 
     <text font-family="Verdana" font-size="6" fill="red";> 
 
     <textPath xlink:href="#clockwise" startOffset="30%" text-anchor="middle"> 
 
      Order This 
 
     </textPath> 
 
     </text> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> 
 
     <text font-family="Verdana" font-size="6" fill="red";> 
 
     <textPath xlink:href="#clockwise" startOffset="50%" text-anchor="middle"> 
 
      Earn This 
 
     </textPath> 
 
     </text> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> 
 
    </a> 
 
    <a xlink:href="" > 
 
     <path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> 
 
    </a> 
 
    <circle class="cente" cx='55' cy='55' r='35' ></circle> 
 
    <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> 
 
</svg>