如何在圓形元素內繪制 svg 圖標？

Question

<svg viewBox="-151 -323 4000 4000" style="" fill="blue">
  <g>
    <circle fill="blue" class="in-circle" r="110">
      <svg
        preserveAspectRatio="xMidYMid meet"
        height="1em"
        width="1em"
        viewBox="0 0 40 40"
        style="vertical-align: middle;color: red;"
        fill="red"
      >
        <g>
          <path d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path>
        </g>
      </svg>
    </circle>
  </g>
</svg>;

我能夠顯示圓圈，但在顯示其中的 svg x 時遇到問題。 此外，有沒有一種方法可以自動優化 viewBox 值而無需輸入值，因為我無法獲得正確的值來最大化圖標的寬度和高度。

<g transform="translate(36, 38)">
  <circle class="in-circle" r="110">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 752">
      <path d="M196.56 543.17 472.2 384.03v-16.051l-275.64-159.14Zm284.89-334.59v332.99h74V208.58Z"></path>
    </svg>
  </circle>
</g>;

另外，我嘗試了這個，但它似乎又不起作用。

Answer 1

您不要將路徑放在圓圈標簽內。 您需要設置每個形狀的坐標。 在這種情況下，我會將 ctoss 放在帶有 viewBox 的符號元素中，並與<use>一起使用。 這將允許我給用戶一個位置 (x,y) 和一個寬度和一個高度。 在嵌套示例中，我為使用提供了 100 vut 的寬度和高度，您可以選擇另一個值：

 <svg viewBox="-150 -150 300 300" > <circle fill="blue" class="in-circle" r="110"></circle> <use href="#sym" width="100" height="100" x="-50" y="-50" /> <symbol id="sym" viewBox="6.9 8 26.5 26.5" fill="red"> <path id="kk" d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path> </symbol> </svg>