패턴이있는 인라인 SVG가 있습니다. 두 개의 다른 페이지 레이아웃이 필요합니다. 하나는 "미디어 인쇄"용이고 다른 하나는 브라우저 용입니다. #svgCanvas에서 모든 것을 동적으로 만들고 있으며 인쇄 레이아웃의 맨 아래에 나타나야합니다.
내 첫 번째 아이디어는 전체 svg를 복제하는 것이었지만 동일한 ID를 가진 것들로 끝났고 Firefox와 Edge는 그것에 대해 정말 화가났습니다. 이를 달성하기위한 대안은 무엇입니까?
나는 svg에서 html5 캔버스로 변환하는 것을 보았지만 어떤 이유로 인해 실제로 작동하지 않았으므로 아래 방법과 같은 다른 쉬운 방법이있을 수 있습니까? 다음과 같이 할 수 있다는 것을 알고 있습니다.
<img src="external.svg">
그래서 인라인 svg로 똑같이 할 수 있어야한다고 생각했습니다.
<span class="media-print-only">
some stuff
<img src="#svgCanvas">
</span>
<span class="no-media-print">
some more stuff
<svg id="svgCanvas">
<defs> some <patterns> </defs>
some lines and rectangles that are using patterns in defs
</svg>
again more stuff
</span>
use이를 위해 요소를 사용할 수 있습니다 . 를 사용하여 SVG 그래픽을 만들 때 이와 같은 요소 id를 사용하여 use어디서나 참조 할 수 있습니다 .
<span class="media-print-only">
<div class="svg-container">
<svg width="200px" height="200px">
<use xlink:href="#svgCanvas"/>
</svg>
</div>
</span>
<span class="media-no-print">
<div class="svgRealPlace">
<svg width="200px" height="200px">
<use xlink:href="#svgCanvas"/>
</svg>
</div>
</span>
<!--defining base SVG graphic-->
<svg width="0" height="0">
<svg id="svgCanvas" width="200px" height="200px">
<defs>
<pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="5" fill="blue"/>
</pattern>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#pattern)"/>
</svg>
</svg>참고 :
기본 svg요소 또는 상위 요소 는 base에 대한 참조를 중단하므로 display:none스타일 또는 hidden속성 이 없어야합니다svg . 그래서 컨테이너 svg요소의 크기 를 0으로 설정 하여 화면에서 숨 깁니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다