HTML 페이지에서 SVG 파일 바꾸기

웹 페이지에 표시해야하는 SVG 파일이 하나 있습니다. SVG 파일에는 링크가 포함되어 있으며 링크를 클릭하면 페이지가 새 창에서 열립니다.HTML 페이지에서 SVG 파일 바꾸기

1) 나는 링크를 클릭 할 수없는 오전

<img id="zoom_mw" src="NC_013929_Annotation_details.svg" alt="The CRISPRmap" 
    data-zoom-image="NC_013929_Annotation_details.svg">

같은 IMG 태그를 사용하는 경우.

2) 내가 링크를 클릭 할 수 있어요 내가

<object type="image/svg+xml" data="NC_013929_Annotation_details.svg"></object>

을 사용하고이 문제를 극복하기 위해.

하지만 문제는 이미지가 너비 815 픽셀과 높이 815 픽셀의 div로 렌더링되어야한다는 것입니다. img 태그를 사용하면 완벽하게 렌더링되지만 객체 태그를 사용하면 전체 이미지가 로딩됩니다. 이미지는 일반적으로 거대한 파일의 너비와 높이가 4500 픽셀 일 수 있습니다. 확대/축소 기능을 사용하여 사용자 이미지를 선명하게 보여줍니다.

SVG를 높이 및 너비의 div에 렌더링하려면 솔루션이 필요하고 svg 파일의 링크를 클릭 할 수 있어야합니다. HTML4를 사용하고 있으며 HTML5로 업그레이드 할 수 없습니다.

출처

2014-01-16 nutim

당신은이 DIV를 채우고 위/아래 플러스 좌/우, maintainig 화면 비율을 정렬되도록 그런 다음 뷰 박스 SVG의을 계산 XMLHttpRequest의를 사용하여 XML 같은 DIV의 innerHTML로 SVG 파일을로드 할 수 있습니다 . 이렇게하려면 ID 또는 태그 이름 을 통해 svg 요소를 가져올 수 있어야합니다.로드 된 후에는 필요에 따라 svg 요소를 직접 열어서 창을 열 수 있어야합니다.

나는 HTML5.0에서 블로거 IE11/CH31/FF23을 엄격하게 테스트했으며 잘 작동한다. href` /`target` : 대신` `과`onclick`, 사용` `와`인 XLink를 사용

function loadSVGasXML() 
{ 
    var SVGFile="mySVGFile.svg" 

    var loadXML = new XMLHttpRequest; 
    function handler() 
    { 
     if(loadXML.readyState == 4) 
     { 
      if (loadXML.status == 200) //---loaded ok--- 
      { 
       var xmlString=loadXML.responseText 
       svgDiv.innerHTML=xmlString 
       /* to get id 
       var parser = new DOMParser(); 
       XMLDoc=parser.parseFromString(xmlString,"text/xml").documentElement ; 
       SVGId=XMLDoc.getAttribute("id") 
       */ 
       fitSVGinDiv() 
      } 
     } 
    } 
    if (loadXML != null) 
    { 
     loadXML.open("GET", SVGFile, true); 
     loadXML.onreadystatechange = handler; 
     loadXML.send(); 
    } 
} 


function fitSVGinDiv() 
{ 
    var divWH=815 

    //var mySVG=document.getElementById(SVGId) 
    //---or if no id--- 
    var mySVG=document.getElementsByTagName("svg")[0] 
    var bb=mySVG.getBBox() 
    var bbw=bb.width 
    var bbh=bb.height 

    //--use greater of bbw vs bbh-- 
    if(bbw>=bbh) 
    var factor=bbw/divWH 
    else 
    var factor=bbh/divWH 

    var vbWH=divWH*factor 

    var vbX=(bbw-vbWH)/2 
    var vbY=(bbh-vbWH)/2 

    mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH) 

    mySVG.setAttribute("width","100%") 
    mySVG.setAttribute("height","100%") 

}

출처

2014-01-16 21:05:44

대단히 감사합니다. 프란시스. 잘 작동합니다. – nutim

svg 태그를 사용하여 삽입 태그에 넣을 수 있습니다.

svg 크기를 조정하려면 svg 태그에 속성을 추가 할 수 있습니다.

<svg version="1.1" id="Container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px" height="1000px" viewBox="0 0 1920 1000" enable-background="new 0 0 1920 1000" xml:space="preserve">

이 당신의 연결 당신이 클릭 할 수 있도록 할 SVG 그룹에 온 클릭 속성을 추가 할 수 있습니다 클릭 할 수 있습니다 보장하기 위해 1920 X 1000

로 SVG를 확장 할 것입니다 그리고 자바 스크립트를 호출 한 새 창을 여는 함수.

<g onclick="open_link('http://stackoverflow.com')"> 
    <!-- Your SVG geometry to click on goes here --> 
</g> 

function open_link(url) 
{ 
    var win=window.open(url, '_blank'); 
    win.focus(); 
}

링크가 새 탭이나 창에서 열릴 지 여부는 브라우저 설정에 따라 다르며 제어 할 수 없습니다. svg가 잘 렌더링 될지 또는 전혀 렌더링되지 않을지 여부는 브라우저에 따라 다릅니다. 내 경험에 따르면 Chrome은 svg를 렌더링 할 때 IE의 최신 버전을 따르는 것이 가장 좋습니다. Firefox는 정상이며 Safari는 느립니다 (특히 변환 및 다시 그리기의 경우).

출처

2014-01-16 02:33:41 jeremyjjbrown

. 또한 HTML 4 안에있는 '

로드되는 콘텐츠에 차이가있는 경우 svg 파일에서 참조하는 이미지가 있음을 나타냅니다. svg를 임베드하기 위해 < img>를 사용할 때 보안 제한 때문에 브라우저에서 이러한 외부 참조를 차단합니다. 그러나, 당신은 < 오브젝트>를 사용할 때 같은 svg가 그러한 모든 리소스를로드합니다.

차이가 보이는 크기라면 CSS 문제 일 수 있습니다.이 경우 815x815px에서 표시 할 svg가 충분해질 때까지 CSS를 조정해야합니다. 그러나속성 (좌표계 인 경우 0 0 815 815으로 설정)을 추가해야 svg가 자동으로 지정된 css 뷰포트로 확장됩니다.

출처

2014-01-16 09:13:42

HTML 페이지에서 SVG 파일 바꾸기

답변

관련 문제