연구 노트 - SVG.js의 마커 요소 및 사용 관련 방법

사용()

use 요소는 다른 기존 요소를 시뮬레이션합니다. 마스터 요소의 모든 변경 사항은 모든 사용 인스턴스에 반영됩니다. use()의 사용법은 매우 간단합니다.

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

위 예의 경우 원래 직사각형과 사용된 인스턴스 직사각형이라는 두 개의 직사각형이 svg 도면에 표시됩니다. 어떤 경우에는 원래 요소를 숨겨야 할 수도 있습니다. 가장 좋은 방법은 defs 노드에 원본 요소를 만드는 것입니다.

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

이런 방식으로 ret 요소는 라이브러리 요소로 작동합니다. 편집할 수는 있지만 렌더링되지는 않습니다.
또 다른 방법은 외부 SVG 파일을 가리키는 것입니다. 요소 ID와 파일 경로만 지정하면 됩니다.

var use  = draw.use('elementId', 'path/to/file.svg')

이 접근 방식은 이미 복잡한 이미지를 생성한 경우에 유용합니다.
외부 이미지(도메인 외부)의 경우 XHR을 사용하여 파일을 로드해야 할 수도 있습니다.

채점자()

1)마커()

선, 폴리라인, 다각형 및 경로의 각 개별 지점에 마커를 추가할 수 있습니다. 마커에는 시작, 중간, 끝의 세 가지 유형이 있습니다. 시작이 첫 번째 지점을 나타내는 경우 끝은 마지막 지점이고 중간은 중간 지점입니다.

var path = draw.path('M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100')

path.fill('none').move(20, 20).stroke({
    
     width: 1, color: '#ccc' })

path.marker('start', 10, 10, function(add) {
    
    
  add.circle(10).fill('#f06')
})
path.marker('mid', 10, 10, function(add) {
    
    
  add.rect(5, 10).cx(5).fill('#ccc')
})
path.marker('end', 20, 20, function(add) {
    
    
  add.circle(6).center(4, 5)
  add.circle(6).center(4, 15)
  add.circle(6).center(12, 10)

  this.fill('#0f9')
})

marker() 메서드에는 세 가지 용도가 있습니다. 첫째, 마커는 모든 컨테이너 요소(예: svg, 중첩, 그룹...)에 생성될 수 있습니다. 이는 마커를 여러 번 재사용하려는 경우에 유용하므로 defs에 마커가 생성되지만 아직 표시되지는 않습니다.

var marker = draw.marker(10, 10, function(add) {
    
    
  add.rect(10, 10)
})

둘째, 마커를 생성하여 대상 요소에 직접 적용할 수 있습니다.

path.marker('start', 10, 10, function(add) {
    
    
  add.circle(10).fill('#f06')
})

그러면 def에 마커가 생성되어 직접 적용됩니다. 첫 번째 매개변수는 마커의 위치를 정의하며 첫 번째 예의 3개 매개변수와 비교하면 4개의 매개변수가 있습니다.

마지막으로 재사용을 위해 컨테이너 요소에 마커를 만드는 경우 이를 대상 요소에 직접 적용할 수 있습니다.

path.marker('mid', marker)

마지막으로 대상 요소 참조에서 마커 인스턴스를 가져오려면 다음을 수행하세요.

path.reference('marker-end')

2) marker.height()/너비()

마커의 높이/너비를 정의합니다.

marker.height(10)
marker.width(10)

3)marker.ref()

기본적으로 마커의 refX 및 refY 속성은 각각 너비 및 높이 값의 절반으로 설정됩니다. 마커의 refX와 refY를 다르게 정의하려면:

marker.ref(2, 7)

4)marker.size()

마커 너비 및 마커 높이 속성을 정의합니다.

marker.size(10, 10)

5)마커.업데이트()

마커 요소의 기존 콘텐츠를 지우는 마커 콘텐츠를 업데이트하고 첫 번째 매개변수로 함수를 추가합니다.

marker.update(function(add) {
    
    
  add.circle(10)
})

6) 마커.방향()

방향(방향) 속성을 정의합니다.

marker.orient(50)