Snap.SVG에서 왼쪽 위 SVG 컨테이너의 위치가 필요합니다. s.mousemove(moveFunc)
으로 필요한 좌표가 표시되지만 html 본문의 위치와 관련이 있습니다. html 문서가 반응 적입니다. s.node.offsetLeft 또는 s.node.offsetTop
useing 결과는 정의되지 않는다. ID가 있고 document.getE
Paintcode 및 Snap SVG의 예제를 연결하려고합니다. Here은 슬라이더를 끌 때 기어가 회전하는 간단한 프로젝트입니다. 이것은 훌륭하지만 마우스 대신 상호 작용을하고 싶습니다. 이은 SVG와 같은 기어의 예입니다 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD
아래 예는 SVG 루트 그림의 가장자리를 따라 원을 그리며 실행합니다. 나는 그것을 멈출 수 있고 아무 문제없이 다시 시작할 수있다. 그러나, 나는 그것을 시작 위치로 다시 설정하지 않고 마지막 위치에서 다시 시작 (재개)합니다. 스냅이 가능합니까? <!DOCTYPE HTML>
<html>
<head>
<title>Snap Pause
svg 개체가 다른 개체와 인접 해 있는지 여부를 알아야합니다. 그러므로 나는 그 경계를 얻을 필요가있다. 이러한 객체는 rect 또는 경로가 될 수 있습니다. 그들이 직선 일 때 이것은 매우 쉽지만 구부러 지거나 비뚤어 질 때 이것을하는 법을 모르겠습니다. 무슨 뜻인지의 예는 here 또는 여기에 간단한 예를 찾을 수있다 : 나는 상자의 모서리를 사용하는
드래그로 다른 요소 아래 이미지를 움직일 수 있는지 궁금합니다. 명확하게 설명하는 방법을 모르겠다. 데모를 보아라. https://jsfiddle.net/david7418/o497akje/10/ 나는 드래그 이벤트가 투명 사진의 상단을 형성하고 자신을 그 아래에있는 다른 사진을 이동하지만 트리거합니다. $(function() {
obj = Sna
javascript를 사용하여 역 U 자 모양을 만들 필요가 있지만 알아낼 수는 없습니다. 이 폴리 라인 모양과 비슷하지만 끝점에서 곡선이 같은 점을 사용합니다. 커브와 물건을 가진 복잡한 애니메이션의 코드 예제를 발견했지만 간단한 것은 아닙니다. var lsvg = Snap('#svg');
var arrow = lsvg.polyline([6,10, 3
stroke-dashoffset 및 stroke-dasharray 속성을 사용하여 애니메이션을 적용하려고합니다. 원과 라인 커넥터가 복잡해집니다. 난 여기가 예를 들어 단순화 된, 내 그림입니다 Snapsvg를 사용 <svg version="1.1" id="fImg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="ht
크기를 조정하고 삼각형을 회전 한 다음 Snap SVG의 주어진 지점으로 변환하려고합니다. 저는 중심이 아닌 꼭대기 주위로 삼각형을 회전시키고 싶습니다. 그래서 나는 원형과 같은 것을 만들 수 있습니다. 그래서 먼저 크기를 조정 한 다음 회전하여 나중에 변환한다고 생각했습니다. var t = new Snap.Matrix();
t.scale(0.5);
t
SVG 작업에 익숙하지 않아 프로젝트의 일부로 어려움을 겪고 있습니다. 확장 가능/pannable svg에 사용자의 클릭 위치를 저장하려고하므로 페이지를로드 할 때 앞으로 그 지점에서 다시 만들 수 있습니다. 저는이 프로젝트를 시작할 때 예제에서 사용 된 snap.svg 및 snap.svg.zpd를 사용했기 때문에 snap.svg 및 snap.svg.zpd
나는 svg 유형의 온도계를 가지고있다. 스냅을 사용하여 애니메이션을 만들고 싶습니다. 주어진 값으로 텍스트를 움직일 수는 있지만 주어진 값에 따라 스크린 샷에서 볼 수있는 파선을 움직일 수는 없습니다. 어떻게해야합니까? 여기 나머지 코드없이 내 코드 const svg = Snap(this.svg);
const { color } = this.sta
