如何将圆形SVG齿形图更改为方形?

问题描述 投票:0回答:1

我正在修改 SVG 齿形图,我需要将其形状从圆形更改为方形。以下是我目前用于循环版本的代码:

<div> 18 <br />
  <svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="odontogram-18-top" d="M13.5131 5.42308C15.5964 5.42308 17.5108 6.13252 19.031 7.32618L20.63 5.72713C18.6932 4.12808 16.2158 3.1709 13.5131 3.1709C10.8105 3.1709 8.33312 4.12808 6.39624 5.71587L7.99529 7.32618C9.51551 6.13252 11.4299 5.42308 13.5131 5.42308Z" fill="white" data-odontogram-condition="normal" />
    <path class="odontogram-18-left" d="M4.50438 14.4323C4.50438 12.3491 5.21382 10.4347 6.40747 8.91448L4.79716 7.31543C3.20938 9.25231 2.2522 11.7297 2.2522 14.4323C2.2522 17.1349 3.20938 19.6123 4.79716 21.5492L6.39621 19.9502C5.21382 18.4299 4.50438 16.5156 4.50438 14.4323Z" fill="white" data-odontogram-condition="normal" />
    <path class="odontogram-18-middle" d="M13.5131 21.1884C17.2446 21.1884 20.2696 18.1634 20.2696 14.4318C20.2696 10.7003 17.2446 7.67529 13.5131 7.67529C9.78154 7.67529 6.75653 10.7003 6.75653 14.4318C6.75653 18.1634 9.78154 21.1884 13.5131 21.1884Z" fill="white" data-odontogram-condition="normal" />
    <path class="odontogram-18-bottom" d="M13.5131 23.4412C11.4299 23.4412 9.51551 22.7317 7.99529 21.5381L6.39624 23.1371C8.33312 24.7362 10.8105 25.6934 13.5131 25.6934C16.2158 25.6934 18.6932 24.7362 20.63 23.1484L19.031 21.5493C17.5108 22.7317 15.5964 23.4412 13.5131 23.4412Z" fill="white" data-odontogram-condition="normal" />
    <path class="odontogram-18-right" d="M20.6188 8.91448C21.8125 10.4347 22.5219 12.3491 22.5219 14.4323C22.5219 16.5156 21.8125 18.4299 20.6188 19.9502L22.2179 21.5492C23.8169 19.6123 24.7741 17.1349 24.7741 14.4323C24.7741 11.7297 23.8169 9.25231 22.2291 7.31543L20.6188 8.91448Z" fill="white" data-odontogram-condition="normal" />
    <path d="M13.5131 0.918457C6.04711 0.918457 0 6.96557 0 14.4316C0 21.8975 6.04711 27.9447 13.5131 27.9447C20.9791 27.9447 27.0262 21.8975 27.0262 14.4316C27.0262 6.96557 20.9791 0.918457 13.5131 0.918457ZM13.5131 3.17064C16.2157 3.17064 18.6931 4.12782 20.63 5.71561L19.0309 7.32592C17.5107 6.13226 15.5964 5.42282 13.5131 5.42282C11.4298 5.42282 9.51547 6.13226 7.99525 7.32592L6.3962 5.71561C8.33308 4.12782 10.8105 3.17064 13.5131 3.17064ZM20.2696 14.4316C20.2696 18.1589 17.2405 21.1881 13.5131 21.1881C9.78574 21.1881 6.75655 18.1589 6.75655 14.4316C6.75655 10.7042 9.78574 7.67501 13.5131 7.67501C17.2405 7.67501 20.2696 10.7042 20.2696 14.4316ZM2.25218 14.4316C2.25218 11.7289 3.20936 9.25153 4.79715 7.31466L6.40746 8.91371C5.2138 10.4339 4.50437 12.3483 4.50437 14.4316C4.50437 16.5148 5.2138 18.4292 6.40746 19.9494L4.80841 21.5485C3.20936 19.6116 2.25218 17.1342 2.25218 14.4316ZM13.5131 25.6925C10.8105 25.6925 8.33308 24.7353 6.3962 23.1475L7.99525 21.5485C9.51547 22.7309 11.4298 23.4403 13.5131 23.4403C15.5964 23.4403 17.5107 22.7309 19.0309 21.5372L20.63 23.1362C18.6931 24.7353 16.2157 25.6925 13.5131 25.6925ZM22.229 21.5485L20.63 19.9494C21.8124 18.4292 22.5218 16.5148 22.5218 14.4316C22.5218 12.3483 21.8124 10.4339 20.6187 8.91371L22.2178 7.31466C23.8168 9.25153 24.774 11.7289 24.774 14.4316C24.774 17.1342 23.8168 19.6116 22.229 21.5485Z" fill="black" />
    <path class="x-mark" style="display: none;" d="M16.0085 13.6648L21.9591 6H25.8124L17.9693 15.9176L26 26H22.1125L16.0085 18.1978L9.87042 26H6L14.0477 15.9176L6.18755 6H10.0239L16.0085 13.6648Z" fill="#FF6060" />
  </svg>
</div>

我尝试过调整 viewBox 并修改路径元素,但我不确定如何正确转换形状。如何更改路径来创建方形牙齿图?任何指导将不胜感激。

html svg path shapes
1个回答
0
投票

您可以使用属性rx来制作一个圆角矩形。

<div> 18 <br />
  <svg width="48" height="48" viewBox="0 0 28 28" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(2 2)">
      <rect width="24" height="24" rx="10" fill="white" stroke="black" stroke-width="2"/>
      <path d="M-9 -9 L 9 9 M 9 -9 L -9 9" stroke="black" stroke-width="2"
        transform="translate(12 12)" />
      <rect width="14" height="14" rx="6" fill="white" stroke="black" stroke-width="2"
        transform="translate(5 5)"/>
    </g>
  </svg>
</div>

© www.soinside.com 2019 - 2024. All rights reserved.