我能用Javascript从svg文件的路径中获取一个值吗？或者，我可以将其转换为xml并从中取出吗？
是的，你可以使用JavaScript从SVG文件的路径中获取一个值。SVG（可缩放矢量图形）是一种基于XML的图像格式，因此你可以将SVG文件转换为XML格式并从中提取所需的值。
要从SVG文件中获取路径值，你可以使用JavaScript的DOM操作来解析SVG文件。以下是一种可能的方法：
- 首先，将SVG文件加载到HTML页面中的一个元素中，例如一个隐藏的
<div>元素。
<div id="svgContainer" style="display: none;">
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path id="myPath" d="M10 10 L90 90" />
</svg>
</div>- 使用JavaScript获取SVG元素和路径元素，并从路径元素中获取路径值。
// 获取SVG元素和路径元素
var svg = document.getElementById('mySvg');
var path = svg.getElementById('myPath');
// 获取路径值
var pathValue = path.getAttribute('d');
console.log(pathValue);在上面的示例中，getElementById()方法用于获取SVG元素和路径元素，getAttribute()方法用于获取路径元素的d属性值，即路径值。
请注意，上述示例仅适用于包含单个路径的简单SVG文件。如果SVG文件包含多个路径或其他元素，你需要相应地修改代码来选择正确的路径元素。
关于SVG的更多信息和用法，你可以参考以下链接：
希望以上信息对你有所帮助！
相关·内容
1回答
如何以编程方式在svg元素上绑定属性？
javascript、angularjs、svg
我想将背景颜色绑定到svg元素。我有一个外部svg文件，我引用它，myfile.svg，在这个文件里面有一个id为'mycircle‘的圆圈。
所以我的html看起来像这样：
<div ng-controller="MyCtrl">
<embed src="myfile.svg" id="mySvg"/>
</div>
我有一个控制器，看起来像这样：
function MyCtrl($scope) {
$scope.myfill = 'yellow';
}
现在我想以编程的方
浏览 2提问于2015-06-24得票数 0
2回答
如何使用d3.js将svg附加到前缀svg？
javascript、html、angularjs、d3.js、svg
是否可以使用d3.js将另一个svg附加到预先存在的svg父级？
我知道使用‘svg:image’-属性是可能的。但不幸的是，那时我失去了对内部svg孩子的完全控制。
有关dom节点由d3创建，但未呈现，因此页面保持为空白。
希望有人能帮忙，提前:)
我得到的是：
Html
#svg-main-wrapper {
position: absolute;
min-width: 100%;
min-height: 100%;
bottom: 0;
padding: 0;
margin: 0;
}
<div id=
浏览 1提问于2017-07-13得票数 2
回答已采纳
1回答
线性梯度不工作
css、svg
我试图添加SVG梯度，但它似乎没有添加它，
码
var svgContainer = d3.select("#myConta")
.append("svg")
.attr("id", "myContasvg")
.attr("width", "100%")
.attr("height", "100%")
.attr("preserveAspectRatio", "none")
.attr(
浏览 0提问于2015-04-16得票数 0
1回答
在D3中从文件中追加svg
javascript、jquery、html、svg、d3.js
我有一个SVG容器，我想从SVG文件中追加一个图像。
我所知道的是带有图像标签的方法，但是我不能再编辑这个图像的svg内容了。我寻找了一种更好的javascript方式，并使用了.xml函数D3：
d3.xml("/svg/test.svg", "image/svg+xml", function(xml) {
document.getElementById("mysvg").appendChild(xml.documentElement);
});
它按预期工作(将整个svg文件附加到现有的svg容器中)。现在我的标签上有标签，这有问题吗
浏览 4提问于2015-05-18得票数 0
回答已采纳
1回答
JavaScript:路径"d“属性的自定义函数
javascript、regex、svg
我正在尝试构建一个函数，可以在整个JavaScript中重用它来编辑SVG路径的"d“属性。
目前，我能够得到属性并修改它，但是它是在临时的基础上的。我想要创建一个可重用的函数。
例如，如果我有这样一个SVG：
<svg>
<path class="myPath" d="M25.914,13.143C25.477,8.58,21.678,5,17,5" />
</svg>
要用JavaScript编辑"d“属性，我执行以下操作：
var element = document.querySelector("
浏览 2提问于2014-04-26得票数 0
回答已采纳
1回答
组、SVG、路径中的动态CSS选择
javascript、html、css、svg、path
我正在学习CSS，并处理一个涉及路径的动态颜色选择的问题。
我有一个SVG，它可以有任意数量的路径(1+)，并且有一些预定义的颜色应该根据它们的顺序分配给路径。( web服务返回路径集合)。
为了简单起见，假设我已经知道了4条路径，可能有两种颜色:绿色和deepPink。
问题：如何动态地分配以下颜色(而不为每个路径创建单独的类)：
Path1:绿色
Path2: deepPink
Path3:绿色
Path4: deepPink
.path_group {
stroke="black";
fill="none";
str
浏览 5提问于2014-09-17得票数 0
回答已采纳
1回答
使用d3选择svg子元素时遇到问题
javascript、d3.js、svg
我有一个svg，我正在尝试使用d3.js访问和修改它。svg文件名为us-map.svg。我在我的html中包含了对svg的引用，如下所示：
<object id="imgMap" data="us-map.svg" type="image/svg+xml">
</object>
我可以在我的镀铬手表面板中选择这样的imgMap：
var imgMap = d3.select('#imgMap')
但是，我无法选择子元素。例如，我的imgMap svg有几个子<g>元素，但是子元素没有随此函数返
浏览 1提问于2016-09-22得票数 1
1回答
如何打印由javascript生成的svg代码？
javascript、svg
我有一个javascript函数，它在HTML页面的正文中创建一个svg。此外，在创建网页时，我希望提取由javascript (<svg>..</svg>之间的代码)生成的svg代码，并将其打印到一个文件中，以便在另一个文档中经过。
例如，以下html：
<html>
<head>
<script>
function CreateSVG () {
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = 300;
浏览 9提问于2018-01-15得票数 0
回答已采纳
1回答
如何将拖放元素拖动到svg组中
d3.js
我在左边有几个圆圈，右边有一个svg组。我想在拖放时将圆圈拖到svg组中。一旦我将元素放到svg组中，它就应该被附加到组中。
到目前为止，我已经创建了一个可拖动的元素和可拖动的组，但找不到任何相同的文章。
我在左边有几个圆圈，右边有一个svg组。我想在拖放时将圆圈拖到svg组中。一旦我将元素放到svg组中，它就应该被附加到组中。
到目前为止，我已经创建了一个可拖动的元素和可拖动的组，但找不到任何相同的文章。
演示：
<!doctype html>
<html>
<head>
<title>Editor</title&
浏览 2提问于2015-07-13得票数 1
2回答
Element.getElementById()不工作
javascript、svg、getelementbyid
基本上，我无法从下面的SVG中获取元素text：
panel = document.getElementById("panel");
g = panel.getElementById("gtext");
t = g.getElementById("text");
t.textContent = "hello";
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink"
浏览 3提问于2017-03-15得票数 7
2回答
不带宽度属性的SVG到PNG
javascript、svg、png
哦嗨。我有一个SVG，我正在转换成一个png并上传到服务器。只要我在SVG标记中显式地给出一个宽度和高度值，一切都可以工作。我使用viewBox=“”给SVG一个高宽比，没有宽度和高度属性，svg缩放很好地进入浏览器窗口。因此，我不想在标签中包括宽度和高度。
以下是守则的有关部分：
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var nzs ="";
var canvas = document.cr
浏览 0提问于2019-06-13得票数 0
回答已采纳
1回答
将画布导出为SVG文件
javascript、html、jquery、svg
我正在尝试将包含用Chart.js创建的图表的画布转换为SVG，以便能够从包含该图表的页面下载SVG文件。我已经搜索了5个小时，我尝试了多个脚本，我得到的最好的一个是，但问题是转换后的SVG只包含图表的四分之一，我认为这与Chart.js的响应选项有关(为了转换为SVG，应该设置为false )。
这是HTML文件。
<html>
<body>
<div class="chartContainer">
<canvas id="radarCanvas" style="height: 600px;width:
浏览 24提问于2020-06-08得票数 2
1回答
SVG embed未加载或无法通过contentDocument访问
javascript、html、svg
我一直在努力..。花几个小时解决一个简单的问题，尽管它似乎已经在这里描述过:
我无法访问加载到embed标记中的外部svg文件的元素，即使我等待div或整个窗口加载(我已经尝试了几个“加载侦听器”)
我已经将我的html文件简化为以下几行来向您展示这个问题：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
&l
浏览 29提问于2016-09-28得票数 1
回答已采纳
1回答
无法从d3 json文件读取路径d值？
javascript、json、svg、d3.js
我正在读取json文件中的圆弧信息，并使用d3将它们可视化。实际上，我正在使用d3.layout对数据进行分组。因此，我必须读取这个文件，其中tag是我们的svg标记，即path，而value是path的d值，在读取和返回0之后，问题是d值将被更改。我怎么读value？我应该以不同的方式组织我的json文件吗？这是我的代码：
json文件：
{"id": "svgContent","children": [
{"id": "circle1","tag": "pa
浏览 1提问于2015-05-20得票数 5
回答已采纳
2回答
将数据传递给d3.svg.line()
javascript、d3.js
所以，我有一个Javascript对象，比如：
Object {data: Array[39], time: Array[39]}
object.data是一个值的数组，而object.time是javascript的date对象的数组。
我正在尝试在D3中绘制折线图。我的代码的相关部分：
// Line function
var line = d3.svg.line()
.x(function(d,i) { return x(d.time); })
.y(function(d,i) { return y(d.data); }
浏览 1提问于2014-02-22得票数 7
1回答
创建可重用svg实体所需的d3结构是什么？
d3.js、svg、reusability
我使用从DITA (XML)转换为JSON的API描述来在d3中创建铁路图。我只想定义各种元素一次(比如下面代码中的sidingL和sidingR )。我有一种siding风格。在我的全局变量声明中，我有sidingL (以及sidingR的变体)：
var sidingL = d3.svg.path()
.attr("d", "M50,0 v80 a10,10 0 0 10,10 h20")
.attr("class", "siding");
然后，在添加SVG画布(svgContainer)之后，添加：
浏览 2提问于2016-07-22得票数 0
回答已采纳
2回答
如何使用d3.js将外部组添加到已有的svg？
javascript、d3.js、svg
假设我用d3.js创建了一个svg，如下所示： svg = d3.select('.svgContainer').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
.appen
浏览 37提问于2019-08-30得票数 2
回答已采纳
2回答
D3 JS代码分离
javascript、d3.js
我正在尝试将我的脚本部分分离到一个单独的JS文件中。
当前排序文件：
<html>
<head><title>d3 Funnel Charts</title></head>
<font face="verdana"></font>
<script type="text/javascript" src="d3.v2.min.js"></script>
<script type="text/javascript" src=
浏览 3提问于2017-03-12得票数 0
1回答
如何使用d3.drag()旋转SVG？
d3.js、svg
我有一个简单的矩形附加为SVG。我想用鼠标拖动来旋转它，所以我使用了函数d3.drag()。以下是我为实现这一目标所做的努力，但似乎行不通：
<div id = "svgcontainer"></div>
<script language = "javascript">
var width = 300;
var height = 300;
var origin = {
x: 55,
浏览 0提问于2018-04-09得票数 1
回答已采纳
1回答
如何使用d3 js在svg文件上创建带文本的圆？
javascript、html、svg、d3.js
我是d3 js的初学者。我有一个div，其中包含一个具有svg文件的object标记。
我需要在svg文件上创建带有文本圆圈，并使用d3 js绑定单击函数。
提前谢谢。下面是我的html代码：
<div class="span8 canvasDiv">
<object data="img/floor.svg" type="image/svg+xml" id="floorCanvas"></object>
</div>
JS代码：
var svgContainer = d3.s
浏览 0提问于2015-06-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
