svg 동그라미를 만듭니다

저는 svg에 익숙하지 않고 구조를 알지 못합니다. 무작위로 10 개의 원을 만들고 싶습니다. for() 루프와 같은 루프에서 어떻게 할 수 있습니까?svg 동그라미를 만듭니다

<g id="rotateSquare"> 
<circle cx="100" cy="50" r="20" stroke="black" 
    stroke-width="2" fill="goldenrod" /> 
<text x="110" y="52" fill="red">10</text> 
<animateTransform 
    attributeType="XML" 
    attributeName="transform" 
    type="rotate" 
    from="0,150,150" to="360,150,150" 
    begin="0s" dur="1s" 
    repeatCount="1"/>

출처

2012-04-01 Ecrin

svg가 어떤 종류의 HTML 문서에 포함되어 있습니까? 외부 스크립트를 사용할 수 있습니까? 귀하의 질문에 구체적인 내용을 추가하고자 할 수 있습니다. – Jlange

내 문서가 SVG이고 일부 HTML 코드가 SVG에 임베드되어 있습니다. 또한 Javascript (JQuery 없음) 만 사용할 수 있습니다. 루프에 HTML을 사용할 수 있습니까? – Ecrin

SVG 요소를 절차 적으로 생성하고 DOM에 추가하는 예제는 http://phrogz.net/svg/svg_in_xhtml5.xhtml을 참조하십시오. – Phrogz

다음 사용해보십시오 : 당신이 속성을 설정 한 후 다음 (CX, CY는, r은 랜덤 함수를 통해 생성 할 수 있습니다)

var svgns = "http://www.w3.org/2000/svg"; 
    var new_circle = document.createElementNS(svgns, "circle");

, 것은 당신이를 삽입 할 수 있습니다 svg 문서에 생성 한 새 노드 :

/*parent elemnt*/.appendChild(new_circle);

이 함수를 al 원하는만큼 서클을 생성 할 수 있습니다. 색상을 임의로 지정할 수도 있습니다.

출처

2012-04-01 20:41:17 Jlange

나는 논리가 당신을 고맙게 여기는 것을 이해했다. 그러나 기능을 선언 한 후에 어떻게 새 노드를 svg에 삽입 할지는 모르겠다. svg에 삽입 할 다른 방법을 만들어야합니까? – Ecrin

@Ecrin 당신의 코멘트는 이미 답변되었습니다. 위의'appendChild'를 보라. – Phrogz

나중에 알겠습니다. 감사합니다. – Ecrin

svg 동그라미를 만듭니다

답변

관련 문제