자바 스크립트로 이동 한 후 SVG 경로가 그대로 유지됩니다.

-1

SVG에 직사각형이 있는데 항공기와 같은 그래픽이 하나 있는데 마스크를 사용하여 임의의 궤도로 이동하려고합니다. 나는 이것을위한 해결책을 찾고있다. 자바 스크립트로 이동 한 후 SVG 경로가 그대로 유지됩니다.

EDIT : SVG에서 검은 색 경로를 마스크로 사용하는 자바 스크립트를 얻고 싶습니다. 이동하여 요소의 사본을 만들고 싶습니다.

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="500px" viewBox="0 0 500 500" width="500px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 500 500"> 
<g id="_x32_"> 
    <path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z"/> 
    <path stroke="#000" stroke-width="0.2" d="M31.356,500.29c-17.26,0-31.256-13.995-31.256-31.261v-437.67c0-17.265,13.996-31.261,31.256-31.261h437.68c17.266,0,31.261,13.996,31.261,31.263v437.67c0,17.266-13.995,31.261-31.261,31.261h-437.67z" fill="none"/> 
</g> 
</svg>

출처

2016-10-20 Zsolt Janes

은, 코드 예제를 제공하거나 문제를 지적했다. 어떻게 도움을 기대합니까? –

직장을 보여주십시오. 질문하지 않고 이미 시도한 것을 보여 주면 도움을 줄 수 없습니다. – Soviut

그러면 JavaScript를 작성하기를 원하십니까? 스택 오버플로는 코드 작성 서비스가 아닙니다. –

내가 정확히 당신이 원하는 것을 이해 확실하지 않다 :

은 여기 내가 이동 한 후 비행기를 이동하고 복사 할 것입니다 내 SVG입니다. 그러나 여기에 조금이라도 도움이 될만한 데모가 있습니다.

// Get references to the various elements in the SVG 
 
var svg = document.getElementById("Layer_1"); 
 
var blackpath = svg.getElementById("blackpath"); 
 
var redplane = svg.getElementById("redplane"); 
 

 
// Add an event listener to the SVG that captures mouse move events 
 
svg.addEventListener("mousemove", function(evt) { 
 
    // Convert the mouse position from screen coords to SVG coords. 
 
    var pt = svg.createSVGPoint(); 
 
    pt.x = evt.clientX; 
 
    pt.y = evt.clientY; 
 
    pt = pt.matrixTransform(svg.getScreenCTM().inverse()); 
 

 
    // Move the red plane to the mouse mosition 
 
    redplane.setAttribute("x", pt.x); 
 
    redplane.setAttribute("y", pt.y); 
 

 
    // Create a <use> element to add a cloned "copy" of the plane to the "blackpath" group. 
 
    var useElement = document.createElementNS("http://www.w3.org/2000/svg", "use"); 
 
    useElement.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#plane"); 
 
    // Position the clone at the mouse coords 
 
    useElement.setAttribute("x", pt.x); 
 
    useElement.setAttribute("y", pt.y); 
 
    // Add it to the blackpath group 
 
    blackpath.appendChild(useElement); 
 
});

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" height="500px" viewBox="0 0 500 500" width="500px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <path id="plane" 
 
      d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z" transform="scale(0.2, 0.2) translate(-250, -250)"/> 
 
    </defs> 
 
    <rect width="500" height="500" fill="#407085"/> 
 
    <g id="blackpath" fill="black"></g> 
 
    <use id="redplane" xlink:href="#plane" fill="#f30000" x="-100" y="-100"/> 
 
</svg>

당신은 질문을하지 않은

출처

2016-10-21 05:50:08

감사합니다. 예, mousemove 파라 메트릭 배열 대신에 이런 식으로. 추천 : 어레이 ( "X"= ""10 ", "Y "=" "10"), ) > –

자바 스크립트로 이동 한 후 SVG 경로가 그대로 유지됩니다.

답변

관련 문제