SVG의 호 경로로 원 그리기

짧은 질문 : SVG 경로를 사용하면 원의 99.99 %를 그릴 수 있지만 표시되지만 원의 99.99999999 % 인 경우 원이 표시되지 않습니다. 어떻게 고칠 수 있습니까?

다음 SVG 경로는 99.99 %의 원을 그릴 수 있습니다. ( http://jsfiddle.net/DFhUF/1381/에서 시도하고 4 개의 호 또는 2 개의 호만 보이는지 확인하십시오. 그러나 IE 인 경우에는 SVG가 아닌 VML로 렌더링되지만 비슷한 문제가 있음)

M 100 100 a 50 50 0 1 0 0.00001 0

그러나 원의 99.99999999 % 일 때 아무것도 표시되지 않습니까?

M 100 100 a 50 50 0 1 0 0.00000001 0    

그리고 그것은 원의 100 %와 동일합니다 (아직 호는 아닙니다. 아주 완전한 호입니다)

M 100 100 a 50 50 0 1 0 0 0 

어떻게 고칠 수 있습니까? 그 이유는 함수를 사용하여 호의 백분율을 그리고 원 함수를 사용하기 위해 99.9999 % 또는 100 % 호를 "특별한 경우"해야한다면 어리석은 일입니다.

다시 RaphaelJS를 사용하는 jsfiddle의 테스트 케이스는 http://jsfiddle.net/DFhUF/1381/에 있습니다
(IE 8의 VML 인 경우 두 번째 원조차 표시되지 않습니다 ... 0.01)

최신 정보:

우리 시스템에서 점수에 대해 호를 렌더링하기 때문에 3.3 점이 원의 1/3을 얻습니다. 0.5는 반원을 얻었고 9.9 점은 99 %의 원을 얻습니다. 그러나 우리 시스템에 9.99 점이 있다면 어떨까요? 원의 99.999 %에 가까운 지 확인하고 그에 따라 arc함수 또는 함수를 사용해야 circle합니까? 그렇다면 9.9987 점은 어떻습니까? 어느 것을 사용해야합니까? 어떤 종류의 점수가 "너무 완전한 원"에 매핑되고 원 기능으로 전환되는지, 그리고 원의 "99.9 %"또는 9.9987 점수 인 경우, 호 기능을 사용하는 것은 어리석은 일입니다 .

XAML의 아크와 동일합니다. a로 99.99 % 호를 닫으면 Z원이 생깁니다!

나는 그것이 게임에서 조금 늦었다는 것을 알고 있지만, 새로운 질문과 비슷한 딜레마가 있었을 때 부터이 질문을 기억했으며 누군가가 여전히 하나를 찾고 있다면 우연히 "올바른"솔루션을 찾았습니다.

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

다시 말해, 이것은 :

<circle cx="100" cy="100" r="75" />

이 경로로 달성 할 수 있습니다 :

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

비결은 두 개의 호를 갖는 것입니다. 두 번째 호는 첫 번째가 중단 된 곳에서 픽업하고 음의 직경을 사용하여 원래의 호 시작점으로 돌아갑니다.

하나의 원호에서 완전한 원으로 수행 할 수없는 이유는 (그냥 추측하고 있습니다) 당신은 그 자체로 (150,150이라고 말합시다) 자신에게 (150,150이라고 말하면서) 호를 그리도록 지시하기 때문입니다. "아, 나는 이미 거기에 있으며, 아크가 필요하지 않습니다!".

내가 제공하는 솔루션의 장점은 다음과 같습니다.

1. 원에서 경로로 직접 쉽게 번역 할 수 있습니다.
2. 두 개의 호 선이 겹치지 않습니다 (마커 나 패턴 등을 사용하는 경우 문제가 발생할 수 있음). 깨끗하고 연속적인 선이지만 두 조각으로 그려져 있습니다.

텍스트 경로가 모양을 허용하도록 허용하는 경우이 중 어느 것도 중요하지 않습니다. 그러나 원과 같은 모양 요소에는 기술적으로 "시작"점이 없기 때문에 솔루션을 피하고 있다고 생각합니다.

jsfiddle 데모 : http://jsfiddle.net/crazytonyi/mNt2g/

최신 정보:

textPath참조 경로를 사용하고 호의 외부 가장자리에 텍스트를 렌더링하려는 경우 정확히 동일한 방법을 사용하지만 스위프 플래그를 0에서 1로 변경하여 외부의 외부를 처리합니다. 내부 대신 표면으로 경로를 지정하십시오 ( 1,0누군가가 중심에 앉아서 원을 그리며 1,1반경 거리에서 중심을 돌아 다니면서 옆에 분필을 끌고 있다고 생각하십시오). 위의 코드가 있지만 변경 사항이 있습니다.

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

Anthony의 솔루션과 관련하여 경로를 얻는 함수는 다음과 같습니다.

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

완전히 다른 접근법 :

svg에서 호를 지정하기 위해 경로를 모으는 대신 의사 코드로 원 요소를 사용하고 스트로크-다자 레이를 지정할 수 있습니다.

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

단순성은 다중 아크 경로 방법에 비해 주요 이점입니다 (예 : 스크립팅 할 때 하나의 값만 연결하고 모든 아크 길이에 대해 완료된 경우)

호는 가장 오른쪽 지점에서 시작하며 회전 변환을 사용하여 이동할 수 있습니다.

참고 : Firefox에는 90도 이상의 회전이 무시되는 이상한 버그가 있습니다. 위에서부터 호를 시작하려면 다음을 사용하십시오.

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

Adobe Illustrator는 SVG와 같은 베 지어 곡선을 사용하며 원의 경우 4 개의 점을 만듭니다. 두 개의 타원형 호 명령 으로 원을 만들 수 있지만 SVG의 원에는 <circle />:)을 사용합니다.

두 개의 호 명령을 사용하여 완전한 원을 그리는 것이 좋습니다.

일반적으로 타원 또는 원 요소를 사용하여 완전한 원을 그립니다.

Anthony와 Anton의 답변을 바탕으로 생성 된 원을 전체 모양에 영향을주지 않고 회전시키는 기능을 통합했습니다. 애니메이션의 경로를 사용하고 있고 애니메이션의 시작 위치를 제어해야하는 경우에 유용합니다.

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;
}

경로 변환에 타원 속성을 찾고있는 저와 같은 사람들을 위해 :

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

함수로 작성하면 다음과 같습니다.

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

이 답변은 너무 복잡합니다.

두 개의 호를 만들거나 다른 좌표계로 변환하지 않고이 작업을 수행하는 가장 간단한 방법입니다.

이것은 캔버스 영역에 width w와 height 가 있다고 가정합니다 h.

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

"long arc"플래그 만 사용하면 전체 플래그가 채워집니다. 그런 다음 호를 99.9999 %의 완전한 원으로 만듭니다. 시각적으로 동일합니다. 원의 가장 오른쪽에서 원을 시작하여 스윕 플래그를 피하십시오 (중심에서 직접 수평으로 한 반지름).

다른 방법은 두 개의 큐빅 베 지어 곡선을 사용하는 것입니다. svg arc 매개 변수를 인식하지 않는 pocketSVG 를 사용하는 iOS 사람들을위한 것 입니다.

C x1 y1, x2 y2, xy (또는 c dx1 dy1, dx2 dy2, dx dy)

여기의 마지막 좌표 세트 (x, y)는 선을 끝내려는 위치입니다. 다른 두 가지는 제어점입니다. (x1, y1)은 곡선의 시작점을위한 제어점이며, (x2, y2)는 곡선의 끝점을 나타냅니다.

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />

나는 여기서 jsfiddle을 만들었습니다.

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

링크

console.log의 입력을 변경하고 콘솔에서 결과를 얻는 것만으로도 충분합니다.