SVG 마커가 표시되지 않습니다.

마커를 사용하여 한쪽 끝에 작은 삼각형이있는 SVG 라인을 만들려고합니다. 그러나이 코드는 작동하지 않습니다. 마커가 나타나지 않습니다. 내가 svg를 실험하고있는 것은 이번이 처음이지만 코드에 실수가없는 것 같아요. 뭔가 잘못 됐나요? 미리 감사드립니다.SVG 마커가 표시되지 않습니다.

<svg id="rep-svg-13" class="rep-svg" style="position: absolute; left: -82px; top: -269px; display: block; opacity: 1;" width="35.6534886317" height="87.101405277" xmlns:xlink="http://www.w3.org/1999/xlink"> 

<defs> 

<marker id="myMarker-13" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"> 
<polygon points="0,0 10,5 0,10" style="fill:rgb(100, 100, 100);"></polygon> 
</marker> 

</defs> 

<line id="rep-arrow-13" x1="5.20716619357648" y1="-10.545316845143645" x2="30.44632243812352" y2="97.64672212214364" stroke="#ff0000" stroke-width="7" marker-end="url(#myMarker-13)"></line> 

</svg>

출처

2014-05-12 Miguelmmm

아마도 보이는 영역 밖에 인쇄하고있을 것입니다. 참조 : http://jsfiddle.net/helderdarocha/5jPG3/ – helderdarocha

줄과 화살표가 있습니다. 그들은 단지 보이지 않습니다. 귀하의 위치 좌표는 화면 밖으로을 그리는 :

left: -82px; top: -269px;

이 JSFiddle를 참조하십시오.

left 및 top 값을 양수 값으로 바꾸고 SVG 크기를 변경하고 테두리를 추가하여 경계를 표시하면 이제 화살표가 표시됩니다.

출처

2014-05-12 21:35:48 helderdarocha

죄송합니다. 전체 상황을 설명하지 않았습니다 ... svg 요소는 다른 요소 안에 있으므로 실제로 볼 수 있습니다. 문제는 여기에 붙여 넣은 코드가 JSFiddle에서 잘 작동한다는 것입니다. 그러나 버튼을 클릭하면 이러한 모든 요소가 자바 스크립트로 만들어집니다. 분명히 JSFiddle에 붙여 넣을 때 코드가 제대로 작동합니다. 하지만 실제 페이지에서 자바 스크립트에 의해 생성 된, 그것은 작동하지 않습니다! 이것은 심지어 의미가 있습니까? – Miguelmmm

질문을 편집하여 해당 정보 (작동하지 않는 JavaScript 코드)로 질문을 업데이트 할 수 있습니까? 당신이 그것을 가진 바이올린을 제공 할 수 있다면 그것은 또한 유용 할 것입니다. – helderdarocha

글쎄, 나는 코드를 "적응"시켜야했지만 필수적 요소는 피들에 남아 있었다. Te 문제입니다 : 마커가 표시되지 않으며 예상 한 것입니다. 뭐가 잘못 됐는지 말해 줄래? 피들 : http://jsfiddle.net/miguelrego/7HTmv/1/ – Miguelmmm

SVG 마커가 표시되지 않습니다.

답변

관련 문제