Làm thế nào để chuyển đổi một vòng tròn thành một con đường?

Ví dụ: khi tôi lưu một SVG từ họa sĩ minh họa và xem mã, tôi thấy một <circle>phần tử, ví dụ,

<circle cx="131.6" cy="292.3" r="311.7" />

nhưng tôi muốn nó là một <path>yếu tố, không phải là một <circle>yếu tố.

Làm thế nào tôi có thể thay đổi nó thành một yếu tố đường dẫn?

Một giải pháp: Trong Illustrator, chọn vòng tròn của bạn và chọn Object> Compound Path> Make.

Dưới đây là một thử nghiệm nhanh bằng cách sử dụng hình dạng vòng tròn Illustrator, được nhân đôi, lần đầu tiên không có sửa đổi và lần thứ hai với đường dẫn hỗn hợp được áp dụng:

<circle class="cls-1" cx="466.5" cy="184.5" r="117.5"/>
<path class="cls-1" d="M320,190.5A121.5,121.5,0,1,1,198.5,69,121.5,121.5,0,0,1,320,190.5Z" transform="translate(-77 -69)"/>

Lưu ý: Bạn có thể quay trở lại một hình dạng cơ bản bằng cách chọn Object> Compound Path> Release.

Một trường hợp thử nghiệm:

Trước khi áp dụng đường dẫn hỗn hợp:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 157.41935">
  <defs>
    <style>
      .a {
        fill: #ed2024;
      }

      .b {
        fill: none;
        stroke: #ed2024;
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }
    </style>
  </defs>
  <title>before</title>
  <rect class="a" width="100" height="100"/>
  <rect class="a" x="127.54853" width="100" height="100" rx="12" ry="12"/>
  <circle class="a" cx="305.09706" cy="50" r="50"/>
  <polygon class="a" points="482.646 50 457.646 93.301 407.646 93.301 382.646 50 407.646 6.699 457.646 6.699 482.646 50"/>
  <polygon class="a" points="560.194 12.169 592.212 0.8 591.278 34.721 612 61.615 579.405 71.209 560.194 99.2 540.983 71.209 508.388 61.615 529.111 34.721 528.176 0.8 560.194 12.169"/>
  <line class="b" y1="137.41935" x2="612" y2="137.41935"/>
</svg>

Sau khi áp dụng đường dẫn hỗn hợp cho từng hình dạng riêng lẻ:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 157.41935">
  <defs>
    <style>
      .a {
        fill: #ed2024;
      }

      .b {
        fill: none;
        stroke: #ed2024;
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }
    </style>
  </defs>
  <title>after</title>
  <path class="a" d="M100,100H0V0H100Z"/>
  <path class="a" d="M215.54853,100h-76a12.03528,12.03528,0,0,1-12-12V12a12.03528,12.03528,0,0,1,12-12h76a12.03528,12.03528,0,0,1,12,12V88A12.03528,12.03528,0,0,1,215.54853,100Z"/>
  <path class="a" d="M355.09706,50a50,50,0,1,1-50-50A50,50,0,0,1,355.09706,50Z"/>
  <path class="a" d="M482.6456,50l-25,43.30127h-50L382.6456,50l25-43.30127h50Z"/>
  <path class="a" d="M560.19413,12.16931,592.21192.8l-.93427,33.92058L612,61.61455l-32.5952,9.59476L560.19413,99.2,540.98346,71.20931l-32.5952-9.59476,20.72235-26.894L528.17634.8Z"/>
  <path class="b" d="M0,137.41935H612"/>
</svg>

Các tập tin svg ở trên, được kết xuất, có thể được tìm thấy ở đây .

Liên kết:

• Mẹo để tạo và xuất các SVG tốt hơn cho web (bài viết này có một vài lý do tại sao hình dạng cơ bản của <path>Svg có thể tốt hơn , ymmv)
• Làm việc với Live Shapes trong Illustrator
• MDN: Hình dạng cơ bản
• Kết hợp các đối tượng bằng cách sử dụng đường dẫn hỗn hợp

var circle = doc.getElementsByTagName('circle');

 var convertSvgCircleToPath = function(cx, cy, r, deg) {

      var theta = deg * Math.PI / 180,
      dx = r * Math.cos(theta),
      dy = -r * Math.sin(theta);

      return "M " + cx + " " + cy + "m " + dx + "," + dy + "a " + r + "," + r + " 0 1,0 " + -2 * dx + "," + -2 * dy + "a " + r + "," + r + " 0 1,0 " + 2 * dx + "," + 2 * dy;

 }

 convertSvgCircleToPath(circle.getAttribute('cx'), circle.getAttribute('cy'), circle.getAttribute('r'), 180);

vị trí cx = trục x cy = vị trí trục y r = bán kính đường tròn deg = 180/360