<object>을 사용한 인터랙티브 SVG?

제품 지원 자체 호스팅
9

점점 천천히 이 문제를 파악해 나가고 있습니다. 제 질문을 하기 위해 상당한 세팅이 필요합니다:

SVG

SVG를 생성하는 웹 서버를 하나 가지고 있습니다. 이 질문을 위해 아주 단순한 테스트 SVG를 생성합니다…

<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#40638C" stroke-width="3"></path>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#40638C" stroke-width="3"></path>
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#40495E" fill="#40495E"></path>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"></path>
</svg>

단순히 멋져 보이는 “병합(merge)” 아이콘일 뿐입니다. PATH 요소가 4개 있다는 점에 유의하세요.

인라인 처리

SVG를 게시물에 넣기 위해 테마를 통해 추가된 자바스크립트를 사용하고 있습니다.

최종 목표는 제대로 된 플러그인을 만드는 것입니다. 하지만 지금은 개념 증명(PoC)을 구축하는 것만 시도하고 있습니다. 그래서 단순히 테마 커스터마이징의 </head> 섹션에 붙여넣기만 했습니다:

<script type="text/discourse-plugin" version="0.8">
var UMB = {
    svgload: function(base, target) {
        var url = base + $(target).text();
        $(target).html('');
        $.ajax({
            method: "GET",
            url: url,
            async: false,
            dataType: "text",
            success: function(data) { $(target).append(data); }
        });
        alert('loaded!');
        $(target).children('path').each(function(){alert('here is a path element');});
    },
}
$.fn.umbdv = function() {
    this.each(
        function() {
            UMB.svgload('__URL_REDACTED__', this);
        }
    );
    return this;
};
api.decorateCooked(
  $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
  { id: 'umbdv' }
);
</script>

여기서…

var UMB = {는 여기저기 거대한 익명 함수를 두지 않도록 하는 전역 변수일 뿐입니다.

$.fn.umdv = 는 제 생각에 "플러그인"이라고 불리는, JQuery를 확장하는 것입니다.

api.decorateCooked(는 게시물이 브라우저로 전송되기 전에 게시물을 조작할 수 있게 해줍니다.

사용법 (Incantation)

토론에서 이렇게 작성합니다…

<div data-custom="umbdv">/vtest</div>

해당 DIV에 대해 UMB.svgload('__URL_REDACTED__', this)가 호출됩니다.

UMB.svgload()는 /vtest 문자열을 올바르게 해석하고, URL을 구성하며 AJAX 요청을 수행합니다. append(data)가 성공적으로 수행되고 보옵 내 SVG가 인라인으로 표시됩니다…

Screen Shot 2021-01-24 at 10.50.45
Screen Shot 2021-01-24 at 10.50.452872×1584 728 KB

UMB.svgload() 내부의 alert()도 예상대로 발화됩니다. (명백히 디버그용 해킹이죠, 그렇죠? :))

질문 (드디어)

Discourse 호스팅 포럼에 스태프 전용(SAFF ONLY) 토론을 하나 만들었습니다. 여기서 이 동작을 실제로 볼 수 있습니다. (관리자 사용자로 내 설치 환경에 들어올 수 있는 Discourse 스태프/지원팀에게 말하는 것입니다.)

https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109

왜…

$(target).children('path').each(function(){alert('here is a path element');});

…이 PATH 요소 중 하나도 선택하지 않는 걸까요?

아무것도 하지 않습니다—오류도 없습니다. 아무것도.

다음 단계

이 자명한 alert() 개념 증명이 작동하게 되면 제가 나아갈 방향은…

“작업하고 있는” DOM 조각이 아직 실제 문서 DOM에 연결되어 있지 않다는 점(UMB.svgload()이 호출되는 시점에서)을 인지하고 있습니다. 그래서 $(target)…이 제가 필요한 것이라고 기대합니다.

궁극적으로, 훨씬 더 복잡한 SVG를 인라인으로 처리해야 하며 더 복잡한 JQuery 선택자를 사용해야 합니다. $(target) 내부의 많은 요소를 찾아 이벤트 핸들러(예: onclick)를 연결하고, 이는 다른 UMB.… 전역 함수를 호출하게 될 것입니다.