Question

我很新，并尝试将一些绘图与文本结合起来或绘制更多内容。我画了一个带有剖面的圆圈，我希望文字显示在每个圆圈的中心。但是我的视口没有足够的空间用于文本，因为我先画圈子，当我增加svg宽度＆amp;高度我的圆圈变得更大，我不希望它发生。我需要空间来画线条和文字。请建议我如何保持圆圈尺寸（300,300）并留出空间。感谢

   <svg width="300" height="300" viewBox="0 0 300 300">
      <g transform="translate(150,150)" fill="none" stroke-width="45">
      <path stroke="#CBA135" d="M-110 0 A110 110 0 0 10-110"/> 
      <path stroke="#7EC34F" d="M0 -110 A110 110 0 0 1110 0"/>  
      <path stroke="#ABDB92" d="M110 0 A110 110 0 0 1-110 0"/>
      </g>
      <g transform="translate(150,150)" fill="none" stroke-width="2">
        <path stroke="#fff" d="M0 -137 L0,-82"/>
        <path stroke="#fff" d="M-137 0 L-82,0"/>
        <path stroke="#fff" d="M137 0 L82,0"/>
        <path stroke="#333" d="M117 -99 L137,-119"/>
        <path stroke="#333" d="M0 147 L0,167"/>
         <path stroke="#333" d="M-117 -99 L-137,-119"/>
        <text x="-169" y="-140" font-family="sans-serif" font-size="18px" 
        fill="#438736">WORD1 WORD2</text>

Here's link to my codepen

Answer 1

当我增加svg宽度＆amp;高度我的圈子变得更大，我不想要

viewBox属性允许您指定一组给定的图形拉伸以适合特定的容器元素。

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox

我建议删除你的ViewBox元素，只需在SVG上设置高度和宽度。尽可能多。

Answer 2

我不太了解制作圈子或任何东西，但如果你制作圈子position: relative和文字字段position: absolute

，它可能会有效

svg在添加文本

2 个答案: