고급 SVG 이미지 추가

캔버스에 고급 SVG 이미지를 추가하면 디자인 타임 또는 런타임에 개별 이미지 부분의 속성을 변경할 수 있습니다. 예를 들어, 하드웨어 구성 요소 표현을 강조 표시하여 하드웨어 부품 오작동을 알릴 수 있습니다.
필수 구성 요소
이미지 속성을 제어하려면 다음 요구 사항을 준수하는 SVG 파일을 가져옵니다.
  • 파일 형식은 SVG 1.2 Tiny입니다.
  • 파일에는 구성하려는 모든 이미지 요소 및 속성이 포함되어 있습니다.
  • 채우기 및 스트로크 속성이 존재하며 XML 속성 또는 인라인 CSS로 정의된 색상이 있습니다.
  • 색상 값은 16진수입니다.
팁: SVG 파일이 요구 사항을 준수하지 않는 경우 이미지가 예상대로 표시되지만 이미지 속성을 변경할 수는 없습니다.
  1. 고급 SVG 이미지를 추가하려면
  2. 프로젝트 보기
    에서 이미지를 포함할 개체 또는 폴더를 마우스 오른쪽 버튼으로 클릭한 다음,
    새로 만들기
    도면
    고급 SVG 이미지
    를 선택합니다.
  3. 캔버스에 나타나는 빈 이미지
    Image placeholder
    를 두 번 클릭합니다.
  4. 파일 선택
    에서 표시할 이미지를 선택한 다음
    선택
    을 선택합니다.
    팁:
    항목을 찾으려면
    파일 선택
    에 찾을 항목 이름의 입력을 시작합니다.
    파일이
    파일 선택
    에 나타나지 않으면
    파일 가져오기
    파일 가져오기
    를 선택하고 가져올 파일을 선택한 다음
    선택
    을 선택합니다.
  5. (선택 사항) 텍스트 편집기에서 SVG 파일을 열고 변경하려는 이미지 요소의
    @id
    속성과 수정하려는 속성이 모두 SVG 파일에 있는지 확인합니다.
    예를 들어, 섀시의 다각형 스타일을 변경할 수 있으려면:
    <g id="
    ConveyorChassis
    "> <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/> </g>
  6. 속성
    에서
    SVG 요소 속성
    을 확장한 다음
    ID
    에서 변경할 이미지 요소를 선택합니다.
    팁: SVG 파일 요소의 드롭다운 옵션은 SVG 파일 요소의
    @id
    속성에 해당합니다. 드롭다운에 값이 표시되지 않으면 SVG 이미지가 이미지 속성을 제어하는 데 필요한 요구 사항에 맞지 않을 수 있습니다.
  7. 속성
    에서 선택한 이미지 요소에 대해 변경할 속성을 선택한 다음
    에서
    동적 링크 추가
    를 선택하여 복합 동적 링크를 만들거나 표시된 속성에 대한 값을 입력합니다.
    • 색상
      . 색상의 16진수 값을 선택 또는 입력하거나, 16진수 색상 값으로 변환하는 컨버터를 포함한 복합 동적 링크를 만듭니다. 예:
    • 불투명도
      . 0에서 100 사이의 값을 입력하여 이미지 요소를 완전히 투명하게 하거나 완전히 불투명하게 만듭니다.
    • 스트로크 너비
      . 선의 너비를 픽셀 단위로 입력합니다.
    • 스트로크 대시 배열
      . 다음 중 한 가지 방법으로 대시 배열을 지정합니다.
      • 실선
        을 선택하거나 입력합니다. 이 옵션이 기본값입니다.
      • 단일 숫자를 입력합니다. 숫자는 대시의 길이와 대시 사이의 공백 길이를 모두 나타냅니다. 예를 들어, 대시 길이와 대시 사이의 공백 길이가 모두 5픽셀이 되도록 5를 입력합니다.
      • 세미콜론으로 구분된 일련의 숫자를 반복 가능한 형식 #;#으로 구성합니다. 첫 번째 숫자는 대시의 길이를 나타내고 각 세미콜론 뒤의 숫자는 대시 사이의 공백 길이를 나타냅니다. 입력한 시리즈가 반복됩니다. 예를 들어 5;2;10;3을 입력하면 첫 번째 대시는 5픽셀, 이 대시 뒤의 공백은 2픽셀이 되고, 그 뒤에 10픽셀의 또 다른 대시와 3픽셀의 공백이 이어집니다. 이 시리즈는 짧은 대시 다음에 전체 줄에 대한 긴 대시가 표시되도록 반복됩니다.
    팁:
    dasharray 속성을 컨트롤러의 문자열 변수나 태그에 바인딩할 때 잘못된 문자열 값을 dasharray 속성 값으로 설정하면 런타임에 해당 값이 SVG 파일의 값으로 변경됩니다.
    예를 들어 고급 SVG에서 대시 배열이 실선으로 정의되어 있지만 현재 대시 패턴으로 표시되는 경우, dasharray 속성의 바인딩 태그 값이 abc와 같은 잘못된 값으로 변경되거나 이 값에 문자열 형식 오타(예: 1;5:8)가 포함된 경우 해당 값은 SVG 파일에 지정된 실선으로 되돌아갑니다.
    팁: 이미지 요소에 대해 선택한 속성은 이미지 요소와 함께 SVG 이미지 파일에 있어야 하며, 그렇지 않으면 이미지 요소에 대한 속성을 구성할 수 없습니다.
  8. SVG에 대한 속성을 더 추가하려면
    SVG 요소 속성
    옆에 있는
    Add
    를 선택한 다음 5단계와 6단계를 반복합니다. 예를 들어 SVG 이미지 요소에 대해
    색상
    을 구성한 경우
    불투명도
    속성을 추가하여 동일한 이미지 요소 또는 다른 이미지 요소의 불투명도를 변경할 수 있습니다.
  9. SVG의 기본 속성을 변경하려면
    속성
    에서
    모양
    을 확장하고 복합 동적 링크를 만들거나 값을 입력하여 속성을 변경합니다.
고급 SVG 이미지 예 - 비활성화된 경보(회색 컨베이어 섀시)
고급 SVG 이미지 예 - 활성화된 경보(빨간색 컨베이어 섀시)
의견을 작성 부탁드립니다.
이 자료에 대한 문의사항이나 요청사항이 있습니까? 여기에 요청사항을 작성 부탁드립니다.
Normal