将指向 SVG 的链接转换为内联 SVG 元素 [英] Convert link to a SVG into an inline SVG element

查看：35 发布时间：2021/9/1 19:21:56 javascript svg

本文介绍了将指向 SVG 的链接转换为内联 SVG 元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以将链接转换为外部 SVG，例如 http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg 到一个元素?

我的第一种方法是获取 svg 页面的源代码，但这对于 Javascript 中的外部源是不可能的.

解决方案

内联加载 svg 文件的最简洁方法是在您的网页上创建一个 DIV 并通过 XMLHttpRequest 加载 svg 文件并使用 innerHTML

将响应文本放入 DIV

然后您可以根据需要检查/更改文件.

以下是将您的文件调用到网页中的示例:

<html xmlns="http://www.w3.org/1999/xhtml"><头><title>内联加载SVG文件</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><body style='padding:0px;font-family:arial'><center><h4>内联加载SVG文件</h4><div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>加载一个 svg 文件作为内联 SVG.这为动态 svg 应用程序提供了对其元素的无缝 DOM 访问.使用 <b>XMLHttpRequest</b>.它可以作为 DIV 的 <b>innerHTML</b> 加载.通过字符串转储 (<b>responseText</b>).

<div id="svgDiv"></div><p><button onClick=changeSomeValues()>change</button></p>SVG DOM: <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></中心><div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div><script id=myScript>函数 loadSVGasXML(){var SVGFile="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg"var loadXML = 新 XMLHttpRequest;函数处理程序(){if(loadXML.readyState == 4 &&loadXML.status == 200){svgDiv.innerHTML=loadXML.responseTextmySvgValue.value= svgDiv.innerHTML}}如果 (loadXML != null){loadXML.open("GET", SVGFile, true);loadXML.onreadystatechange = 处理程序；loadXML.send();}}//- 按钮 - -函数 changeSomeValues(){path4653.style.fill="绿色"mySvgValue.value=svgDiv.innerHTML}<脚本>document.addEventListener("onload",init(),false)函数初始化(){加载SVGasXML()jsValue.value=myScript.textmySvgValue.value=svgDiv.innerHTML}</html>

Is it possible to convert a link to an external SVG such as http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg to an element?

My first approach was to grab the source code of the svg page, but this is not possible for external sources in Javascript.

解决方案

This cleanest way to load an svg file inline, is to create a DIV on your web page and load the svg file via XMLHttpRequest and place the response text into the DIV using innerHTML

You can then inspect/change the file as needed.

Below is an example the calls your file into the web page:

<!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>

这篇关于将指向 SVG 的链接转换为内联 SVG 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

将指向 SVG 的链接转换为内联 SVG 元素 [英] Convert link to a SVG into an inline SVG element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

将指向 SVG 的链接转换为内联 SVG 元素 [英] Convert link to a SVG into an inline SVG element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭