SVG 파일을 포함하는 방법 <input> 배경

저는 SVG 세계의 초보자입니다. 지금 막 실험을 시작했습니다. 기본 그래픽이 모두 확장 가능한 모바일 사이트를 만들어 모든 디스플레이 해상도를 지원하려고합니다.SVG 파일을 포함하는 방법 <input> 배경

입력 (현재는 type = "image")을 위해 svg 파일을 만들었고 놀라운 결과는 내 코드 편집기 (Coda)에서 예상대로입니다. 테스트 (모바일 Safari, DT Safari 및 DT FF)에서 입력은 깨진 이미지 경로 자리 표시자를 표시합니다 (파일을 마우스 오른쪽 버튼으로 클릭 할 수 있기 때문에 선서가 정확합니다).

(html5) 문서에 내 SVG 파일을 포함하려면 어떻게해야합니까?

출처

2010-12-27 e_known

내가 지금 SVG 지원이 모바일 브라우징을위한 매우 완료되지 않은 것을 알게, HTTP 참조 : // caniuse. co.kr/# cats = SVG.지금은 구현하지 않을 것이지만 그 대답을 배우는 것은 매우 흥미 롭습니다. –

는 Using SVG in background-image를 참조하십시오. 입력에 배경 이미지를 배치하는 CSS는 다른 요소와 동일합니다 :

input { background-image:url('foo.svg') }

출처

2010-12-27 20:13:51 Phrogz

굉장합니다. 감사! 나는 우리가 완전한지지를 기다려야 할 것 같아. –

<img src="mysvg.svg ...

현재 모든 브라우저 렌더링 엔진에서 지원되지 않습니다. 또는 사람들이 사용하는 브라우저가 지원하지 않는다고 말해야합니다.

1> xml 인라인 또는 html 인라인이 xml 문서로 제공됩니다.이 또한 입력 할 때 잘 지원되지 않습니다.

2> 삽입,

3> 객체

4> iframe이는 (페이지로 명중 작은 성능이 다운로드 원인)

5> 구글의 svgweb도 사용할 수 있습니다; svgweb을 배경 레이어로 사용하려고하지는 않았지만 제대로 작동해야합니다.

이미지보다 복잡한 것을 수행하지 않는 경우 스크립트 등 없음 SVGWeb은 거의 모든 브라우저에서 올바르게 표시됩니다. VML을 사용하여 이전 IE 브라우저에서 지원을 포함하고 사용 가능한 경우 기본 지원을 사용하며 마지막으로 플래시 인터페이스를 사용하여 SVG를 표시합니다.

"더 복잡한"어려움은 브라우저가 svgweb이 할 수있는 것을 포함하지 않고 브라우저에서 지원하지 않는 것을하기를 원할 때 기본 네이티브 서포트가있는 경우입니다. 그런 다음 플래시 모드를 강제해야합니다.

http://code.google.com/p/svgweb/

출처

2010-12-27 18:43:43 Wayne

이것은 7 년 전에 큰 해답이었습니다. http://caniuse.com/#feat=svg-img –

또한 SVG 인라인, 그래서 같이 포함 할 수 있습니다 : 이것은 IE 9에서 지원됩니다

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     <h2>Red Circle via SVG</h2> 
     <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> 
      <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> 
     </svg> 
    </body> 
</html>

을, FF 5, Chrome 12 (Win 7에서는 Safari 5가 아님).

틀림없이 이것은 배경 이미지가 아니지만 일부 CSS를 사용하여이를 수정할 수 있습니다.

편집 : Anders는 "이 '인라인'svg를 배경 이미지로 사용하는 방법을 묻습니다. LMGTFY, Anders.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <style type="text/css"> 
      span { position: absolute; }  
      span.svg { z-index: -1; } 
     </style> 
    </head> 
    <body> 
     <h2>Red Circle via SVG</h2> 
     <div> 
      <span> 
       <p>Use CSS to position the circle and put it in the background "behind" the text.</p> 
      </span> 
     </div> 
     <div> 
      <span class="svg"> 
       <svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg"> 
        <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> 
       </svg> 
      </span> 
     </div> 
    </body> 
</html>

여기 승 7에 크롬 (41)를 렌더링하는 방법은 다음과 같습니다 : 여기에 하나의 대답

enter image description here

출처

2011-06-23 15:50:28

어떻게이 "인라인"svg를 배경 이미지로 사용 하시겠습니까 ..? –

SVG 파일을 포함하는 방법 <input> 배경

답변

관련 문제