홈>
이 svg가 있습니다
<div style="width: 84px; height: 78px; position: absolute; margin: 0px auto; left: 88px; top: 67px;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" style="position: relative; left: 0px; top: 0px; width: 100%; height: 100%; enable-background:new 0 0 138 138;">
<defs>
<filter id="blurFilter1" y="-10" height="40" x="-10" width="150">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
<feGaussianBlur in="offset2" stdDeviation="3" result="blur2"></feGaussianBlur>
<feMerge>
<feMergeNode in="blur2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g filter="url(#blurFilter1)">
<rect class="rrfNode" x="0" y="0" width="130" height="130" fill="rgb(235,129,48)" rx="15" ry="15" stroke="black" stroke-width="0.5"></rect>
<text style="font-size:25px; font-family: 'Lora', serif;" x="50%" y="50%" stroke="none" text-anchor="middle" fill="white" dy=".3em">C-Corp1</text>
<rect x="12" y="15" width="110" height="30" rx="15" ry="15" stroke-width="0.5" stroke-opacity="0" fill="rgb(255,255,0)" fill-opacity="0.8" visibility="visible"></rect>
<text style="font-size:25px; font-family: 'Lora', serif;" y="25%" x="50%" stroke="none" text-anchor="middle" fill="red" dy=".3em" visibility="visible">New</text>
</g>
</svg>
</div>
이 svg를 캔버스의 같은 위치에서 캔버스에 그리려고합니다
<canvas id="myCanvas1" width="935" height="768"></canvas>
canvg 라이브러리를 사용하고 있습니다
에서 바이올린을 만들었습니다
https://jsfiddle.net/jnwmudwc/1/.
이것은 소스 svg가 캔버스에 그려 질 때 같은 위치에 있어야한다는 것을 분명히 보여 주지만 그렇지 않습니다.
drawingContext.drawSvg () 메소드에서 좌표가 사용 된 경우에도 소스 svg와 동일하더라도 잘못된 위치에 그려집니다.
나는 꽤 전략을 시도했지만 효과가 없었다. 이 문제에 대한 해결책을 제안하십시오.
- 답변 # 1
관련 자료
- html - 경계선을 올바르게 배치 할 수 없습니다
- python - tkinter 캔버스에 텍스트를 올바르게 추가 할 수 없습니다
- stringstream - 입력/출력 스트림에 대해 C ++에서 파일/스트림 위치 포인터를 올바르게 가져 오는 방법은 무엇입니까?
- html - div 안에 여러 텍스트를 올바르게 배치하려면 어떻게해야합니까?
- debian - 크로스 컴파일 커널 도구, -L이 올바르게 설정된 경우에도 -lelf를 찾을 수 없음
- c++ - CMD가 입력 문자를 올바르게 읽을 수 없습니다
- css - 방사형 그래디언트 배경을 올바르게 배치하는 방법은 무엇입니까?
- Symfony 3 - 심포니 3 - prod 환경에서 사용자 역할을 올바르게 관리 할 수 없습니다
- python - 플라스크에 물체를 올바르게 가져 옵니까? 플라스크가 이름 메일을 가져올 수 없습니다
- Hyperledger 패브릭에서 상태를 올바르게 얻을 수 없습니까?
- css - 반응 네이티브를 사용하여 Android에서 절대 위치로보기를 렌더링 할 수 없습니다
- python - 텍스트 파일에서 읽을 때 문자열을 올바르게 인코딩 할 수 없습니다 (sha256으로 인코딩 중…)
- python - 팬더가있는 CSV 파일을 읽을 때 행과 열을 올바르게 정렬 할 수 없습니다
좋아, 많은 고통을 겪고 난 후 해결책이 있습니다. 다른 사람들이 저와 같은 문제에 직면 할 필요가 없도록 공유하고 싶습니다.
drawingContext.drawSvg ()를 drawingContext.drawImage ()로 바꾸면이 문제가 해결되었습니다. 내가 볼 수 있듯이 div에 포함 된 svg를 base64로 인코딩 된 문자열로 변환 한 다음 drawImage () 함수를 호출하고 있음을 알 수 있습니다.이로 인해 문제가 해결되었지만 svg가 기하학적 모양 이외의 것이거나 svg에 여러 색상이있는 경우 svgs가 캔버스에 검은 색으로 렌더링됩니다.
저도 이것에 대한 해결책을 찾으려고 노력하고 있습니다. 그동안 어떤 사람들이 이것에 문제가 있는지 지적 할 수 있기를 바랍니다.
변경 사항을 반영하기 위해 jsfiddle을 업데이트 할 수 없었지만, 다른 사람들이 필요에 따라 변경하여 다른 사람들을 도울 수 있습니다.