將鏈接轉換爲內聯SVG元素

是否可以將鏈接轉換爲外部SVG（如http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg）爲元素？將鏈接轉換爲內聯SVG元素

我的第一種方法是抓取svg頁面的源代碼，但這對於Javascript中的外部源是不可能的。

2014-03-24 daumann

是否[這]（http://stackoverflow.com/questions/4476526/do-i-use-img-object-或嵌入的svg文件）可以幫助你？ – John

謝謝John，但我認爲這不會有幫助。我需要svg INLINE來修改文件的顏色/描邊等，以及修改SVG本身的路徑元素。 – daumann

[如何使用CSS（jQuery SVG圖像替換）更改SVG圖像的顏色]（http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using- CSS-jQuery的SVG-圖像替代） –

加載SVG文件內嵌這乾淨的方法，就是使用您的網頁上創建一個DIV，並通過XMLHttpRequest加載SVG文件，並將響應文本到DIV innerHTML

然後，您可以檢查/更改根據需要的文件。

下面是一個例子調用文件到該網頁：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Load SVG file file Inline</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
</head> 
<body style='padding:0px;font-family:arial'> 
<center><h4>Load SVG file Inline</h4> 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
Load an svg file as inline SVG. This provides dynamic svg applications seamless DOM access to its elements. Uses <b>XMLHttpRequest</b>. It can be loaded as a DIV's <b>innerHTML</b> via a string dump (<b>responseText</b>). 
</div> 
<div id="svgDiv"></div> 
<p><button onClick=changeSomeValues()>change</button></p> 
SVG DOM:<br /> 
<textarea id=mySvgValue style='width:90%;height:200px;font-size:120%;font-family:lucida console;'></textarea> 
    <br />Javascript:<br /> 
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea> 
</center> 
<div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div> 

<script id=myScript> 
function loadSVGasXML() 
{ 
    var SVGFile="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" 
    var loadXML = new XMLHttpRequest; 
    function handler(){ 
     if(loadXML.readyState == 4 &&loadXML.status == 200){ 
       svgDiv.innerHTML=loadXML.responseText 
       mySvgValue.value= svgDiv.innerHTML 
     } 
    } 
    if (loadXML != null){ 
     loadXML.open("GET", SVGFile, true); 
     loadXML.onreadystatechange = handler; 
     loadXML.send(); 
    } 
} 
//--button--- 
function changeSomeValues() 
{ 
    path4653.style.fill="green" 
    mySvgValue.value=svgDiv.innerHTML 
} 
</script> 
<script> 
document.addEventListener("onload",init(),false) 
function init() 
{ 
    loadSVGasXML() 
    jsValue.value=myScript.text 
    mySvgValue.value=svgDiv.innerHTML 
} 
</script> 
</body> 
</html>

來源

2014-03-25 02:07:03

將鏈接轉換爲內聯SVG元素

回答

相關問題