svg 이미지 위에 선 그리기

어떻게하면 svg 이미지 대신 줄을 그릴 수 있습니까?svg 이미지 위에 선 그리기

<html> 
<head> 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> 
</svg> 
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
</html>

당신은 여기에 코드를 실행할 수 있습니다 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test

편집 : 작동 코드 (적어도 파이어 폭스에서, 파일 확장자가 .xhtml이어야 사파리) -

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="7in" height="4in" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <image width="600px" height="400px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg"> </image> 
    <line x1="50" y1="0" x2="500" y2="1000" style="stroke:#006600; stroke-width:15"/> 
</svg>

출처

2011-07-06 Alede

<svg> 내부 이미지 포함 : 이미지의 상단에있는 라인을 가지고하는

<html> 
<head> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" width="1000" height="1000" /> 
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> 
</svg> 
</html>

출처

2011-07-07 00:25:08

는 버전을 수정하여 작동하도록 얻었다 (! 나는이 코드로 질문을 업데이트했다.) 파이어 폭스에서는 잘 작동하지만 사파리에서는 실패한다. (아무렇지 않은 빈 흰색 상자가 나타난다.) 어떤 생각이 드는지? 고마워! – Alede

친절히 말해서 Safari, xml-html 관련 파일을 명시 적으로 .xhtml 확장명으로 바꿔야 만합니다. 코드의 마지막 작동 부분은 제 질문으로 업데이트되었습니다. 많은 의무가 있습니다! – Alede

했나를 다음과 같은 이미지 뒤에 <svg>을 삽입하려고 시도합니다.

<html> 
<head> 
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <line x1="50" y1="0" x2="50" y2="1000" style="stroke:#006600; stroke-width:20"/> 
</svg> 
</html>

출처

2011-07-06 23:58:08

예, 이미지가 여전히 라인업을 커버를 사용하여 DOM을 조작 할 수 있습니다 .. ( – Alede

를, 그것은 DOM에 이후되어야한다. SVG는 돔에서 찾은 순서대로 모양과 이미지를 렌더링합니다. SVG 사양에는 z- 색인 속성이 없으므로 사용할 수 없습니다. dom에서 이미지 다음에 줄을 배치하면됩니다.

또 다른 참고 : 당신은 자바 스크립트를 통해 SVG를 조작 할 수 있습니다, 그래서 당신은 일반 자바 스크립트 기능

출처

2012-04-19 19:32:55 zeacuss

svg 이미지 위에 선 그리기

답변

관련 문제