TypeError: SVG不是函数
这个错误提示意味着在代码中尝试将SVG作为函数调用，但SVG并不是一个可调用的函数。SVG代表可缩放矢量图形（Scalable Vector Graphics），它是一种用于描述二维矢量图形的XML标记语言。
SVG通常用于在Web页面中显示矢量图形，它具有以下优势：
- 可缩放性：SVG图形可以无损地缩放到任意大小而不失真，适应不同的屏幕尺寸和分辨率。
- 矢量性：SVG图形使用数学公式来描述图形，因此可以保持较小的文件大小，并且可以无限放大而不失真。
- 可编辑性：SVG图形可以通过文本编辑器进行编辑和修改，方便进行定制和调整。
- 动画效果：SVG支持动画效果，可以通过CSS或JavaScript添加动态效果和交互性。
SVG广泛应用于各种场景，包括但不限于：
- 数据可视化：SVG可以用于创建图表、图形和地图，以直观地展示数据。
- 网页设计：SVG可以用于创建矢量图标、徽标和装饰性图形，提升网页的视觉效果。
- 游戏开发：SVG可以用于创建游戏中的角色、道具和背景图形。
- 移动应用：SVG可以用于创建移动应用中的图标、界面元素和动画效果。
- 打印媒体：SVG可以用于创建高质量的印刷品，如海报、名片和宣传册。
腾讯云提供了一系列与SVG相关的产品和服务，包括：
- 腾讯云对象存储（COS）：用于存储和管理SVG文件，提供高可靠性和可扩展性。产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云CDN：用于加速SVG文件的传输，提供全球分发和智能缓存。产品介绍链接：https://cloud.tencent.com/product/cdn
- 腾讯云云函数（SCF）：用于在服务器端执行SVG相关的计算和处理任务，提供弹性和高性能。产品介绍链接：https://cloud.tencent.com/product/scf
请注意，以上只是腾讯云提供的一些相关产品，其他云计算品牌商也可能提供类似的产品和服务。
相关·内容
1回答
我使用库加载一个svg文件，添加它的点(图像)和动画点。我在PHP中加载svg文件，并生成代码将其嵌入到html中。
下面是我的html代码的外观：
<div class="svg-element">
<svg id="svgId" ...>
<!-- SVG code -->
</svg>
</div>
这就是我的javascript代码的样子：
var svg = SVG.get('svgId');
svg.size('100%', &
浏览 0提问于2015-08-28得票数 1
回答已采纳
3回答
我是Javascript和JQuery的新手，对于我认为简单的东西，我有一个问题。我正在制作一个由单个html页面、一个css样式表和一个Javascript文件组成的网站，该文件可以从某个地方检索数据并使用d3.js绘制网络。我的html中有一个SVG元素，我需要从Javascript访问它，以便更改其属性并在其中进行绘制。我最初是在JQuery中创建SVG元素，并将返回值另存为一个变量，供以后使用。然而，这有点丑陋，因为每次我想绘制一个新的网络时，我都必须删除并重新添加SVG。
因此，现在我已经将SVG元素添加到html中，并使布局能够很好地与窗口大小调整一起工作。然而，我似乎不能很容易地
浏览 1提问于2013-06-08得票数 0
回答已采纳
我收到以下错误：
TypeError: $(...).svg is not a function
[Break On This Error]
$('#svgbasics').svg({onLoad: drawIntro});
代码：
<html>
<head>
<title>SVG</title>
<style type="text/css">
#svgbasics { width: 400px; height: 300px; border: 1px solid
浏览 1提问于2013-06-13得票数 0
我喜欢将Toast从Materializecss集成到SVG中。我可以从Materializecss导入css和js，但是当我加载svg时，我得到的是Uncaught TypeError: Cannot use 'in' operator to search for 'touchAction' in null
示例：
有没有办法让这件事起作用呢？
浏览 0提问于2015-04-21得票数 0
我正在尝试通过javascript获取SVG元素的html。我能够在除safari之外的所有浏览器中获取html。我检查了控制台，然后它显示了这个错误
TypeError: 'undefined' is not an object
我已经准备了一个小提琴，这里也是链接：
提前谢谢。
浏览 1提问于2014-05-20得票数 1
我在想你能不能帮我解决一下我对D3的疑虑。我整晚都在修理一个bug，修复之后我仍然不明白到底发生了什么。
以下代码为Refeer：
svg = d3.select("body")
.append("svg")
.attr("width", window.bboxWidth)
.attr("height", window.bboxHeight)
.attr("style", "cursor:crosshair")
.on(
浏览 1提问于2016-01-05得票数 2
回答已采纳
我处理SVG文件。SVG文件有xlink的jQuery。
在Firefox 20.0中打开svg文件时，会出现错误
TypeError: a.style未定义
如果我在Firefox 19和更高版本中打开svg文件，就不会出现错误。
知道为什么svg的jQuery不能在FF20.0中工作吗？
我的SVG演示文件
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD
浏览 4提问于2013-04-07得票数 2
我得到了“未定义的TypeError:无法读取未定义的属性的‘长度’”，并且无法找到解决方案。目标是为svg元素的x、y、宽度和高度创建一个具有随机值的数据数组。
<html>
<head>
<meta name="description" content="Drawing Shapes w/ D3 - " />
<meta charset="utf-8">
<title>Drawing SVG Shapes with D3</title>
<scrip
浏览 0提问于2017-09-07得票数 0
回答已采纳
1回答
我尝试列出所选节点的type属性，但得到 Uncaught TypeError: d.attr is not a function. 如何获取属性？ var svg = d3.select("#grid")
.append("svg");
svg.append('rect').attr('type',1);
svg.append('text').text('a
浏览 51提问于2020-01-29得票数 1
回答已采纳
我收到一个错误：
TypeError: Cannot read property 'x' of undefined
这是我的指令tooltip
.directive('tooltip', function() {
return {
restrict: 'A',
controller: function($scope) {
$scope.enter = function(evt) {
console.log('x: ' + evt.x + ', y: ' + evt.y
浏览 2提问于2014-07-17得票数 0
回答已采纳
1回答
在这里尝试学习d3 (v5)
我正在尝试将事件侦听器添加到我生成的voronoi的一组路径中。
我想使用d3鼠标事件，但我无法访问触发事件的元素。
代码如下：
svg
.append("g")
.attr("class","cells")
.selectAll("path")
.data(voronoi.polygons(vertices))
.enter().append("path")
.attr("d",(d)=>{return "M" + d.join("L&#
浏览 1提问于2020-04-06得票数 2
问题：
我正在尝试测试ES6中React无状态组件的单击功能。但是，当使用sinon监视handleClick函数时，我得到的响应是...
TypeError: Cannot read property 'goToFullCart' of undefined
我已经尝试了其他一些方法。当组件是类组件时，其中一些方法似乎可以工作，但在使用无状态功能组件时，所有方法似乎都失败了，如下所示……
代码：
import React from 'react'
import PropTypes from 'prop-types'
import SVG fr
浏览 5提问于2018-01-12得票数 3
使用d3，我可以：
var labels = d3.select("div#labels").insert("svg:svg")
//....
然后，在下面的代码中，我可以这样做：
labels.selectAll("text")
//... act upon the selection...
但是在firebug控制台中：
>>> labels.selectAll("text")
// produces: TypeError: labels.select is not a function
和：
&
浏览 0提问于2012-12-21得票数 0
回答已采纳
在这种情况下，Snap.svg不起作用：
$('body').append($('<svg>').attr('id', 'test')) ;
console.log($('#test').length) ; // 1
var svg = Snap('#test') ;
svg.circle(100, 100, 50) ;
// Uncaught TypeError: Object [object Object] has no method 'circle'
..。但是，
浏览 2提问于2013-11-18得票数 9
回答已采纳
我有一个React方法，drawChart()，它应该生成一个饼图SVG。然而，React是抛出一个"d是未定义的“的TypeError，并突出显示我的"svg”行(参见下面)
const drawChart = () => {
const data = {'protein': 16, 'fat': 36, 'carbs':45} // sample data
const width = 80;
const height = 80;
const colorScale = d3.scaleO
浏览 1提问于2019-09-22得票数 0
回答已采纳
在我的reactJS应用程序中，我有一个函数，它调用一个助手函数来获得一些计算结果。这是我的组件；
import React, { Component } from "react";
import * as d3 from "d3";
class drawImage extends Component {
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
//here is my he
浏览 0提问于2019-08-28得票数 0
回答已采纳
我正在将Svg.js导入到我的typescript项目中。当我调用SVG时，我收到以下错误。Uncaught (in promise) TypeError: SVG is not a function 我尝试过以不同的方式导入Svg.js，但这似乎不是问题所在。我还尝试以不同的方式调用“SVG”。使用Svg.js版本@svgdotjs/svg.js": "^3.0.11 例如： import * as SVG from "@svgdotjs/svg.js";
const svgjs: any = SVG;
export default svgjs; l
浏览 193提问于2019-02-14得票数 1
1回答
index.html文件，如下所示:这个HTML是用工具栏编译的
<div id="svg"></div>
index.js文件如下：
var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
当我执行我的代码时。它显示了以下错误：
TypeError: s.circle is not a function
浏览 3提问于2014-03-27得票数 4
回答已采纳
我是一个新的反应，我有一个小问题。也许有人能帮我。
所以问题是我不能用onCLick函数触发我想要的元素。现在，我正在尝试删除导航，当
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {navStatus: "navHide"};
}
na
浏览 4提问于2016-06-26得票数 9
回答已采纳
我已经添加了一个事件侦听器来捕捉用户操作后SVG的加载。
HTML
<object id="mySVG" type="image/svg+xml" data="default.svg"></object>
JS
mySVG = document.getElementById('mySVG');
mySVG.addEventListener('load', function () {
// work with SVG contentDocument
});
mySVG.setAttribu
浏览 41提问于2018-09-14得票数 2
回答已采纳
以下代码适用于Chrome 44，但不适用于Firefox 40：
var width = 460, height = 300;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height /
浏览 2提问于2015-09-01得票数 1
回答已采纳
1回答
在默认情况下，我希望呈现的GeoJSON与传单提供的不同。不幸的是，更改style()函数是不够的，因为我需要对正在创建的矢量图形进行更大的控制。
这样做的惯用方法是什么？我认为我可以重用在src/layers/vector/SVG.js中找到的默认SVG呈现器的许多部分。不过，我只想将其替换为一个GeoJSON层/一个FeatureGroup。由于所有这些都不是从Path继承的，所以这似乎是不可能的。
我尝试以一种非常基本的方式扩展SVG类：
import {SVG} from 'leaflet/src/layer/vector/SVG'
export default cl
浏览 1提问于2017-11-13得票数 1
1回答
在类似的主题中，我问过这是否可能()，但是当我试图实现它时：
<body onload="alert('loaded');testSvg();">
<div id="div3" style="border: solid 1px black; width:200px; height:100px">
<svg id="svg3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org
浏览 2提问于2011-05-17得票数 2
回答已采纳
1回答
我正在努力学习如何使用snap.svg，我目前正在尝试改变我的一部分svg的颜色。不过，每次我尝试此操作时，页面都为空，并得到错误(未登录的TypeError:无法读取属性'attr‘of null) --这是我的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="dist/snap.svg.js"
浏览 6提问于2015-10-16得票数 0
回答已采纳
我试着在IPython笔记本上画一个基本的照片：
fn = 'misrables.gml'
gr = igraph.Graph.Read_GML(fn)
igraph.plot(gr)
我看到的不是一个图表，而是这个：
Out[7]: <igraph.drawing.Plot at 0x1120d6978>
我如何说服IPython实际显示图形？
一些澄清
内联matplotlib运行良好，因此这不是问题所在。
我安装了cairo：
import cairo
cairo.version
输出：1.10.0
对绘图对象调用_repr_svg()会导致错误：
TypeE
浏览 4提问于2014-11-12得票数 3
回答已采纳
在下面的示例中，为什么draw.clear()方法抛出错误TypeError: Cannot read property 'parentNode' of undefined at create.clear？我该怎么做才能让这个清晰的方法起作用，而不抛出任何错误呢？
import * as SVG from 'svg.js';
import 'svg.filter.js';
// create the svg
let draw = new SVG.Doc('root');
draw.size('100vw', &#
浏览 2提问于2018-01-16得票数 0
我是空手道UI自动化的新手，我有一个前端UI，它有一个SVG元素，当点击时会带来一个下拉列表。
当我为它编写UI测试时，我得到了javascript计算错误，因此寻求一些建议/帮助。
下面是屏幕上清晰可见的UI元素及其CSS定位器的屏幕截图
这就是SVG元素的CSS定位器的显示方式
这唯一地标识了SVG元素(加号按钮)
svg[class='svg-inline--fa fa-plus-square fa-w-14 ']
这是我为单击它而编写的代码部分
And click("svg[class='svg-inline--fa fa-plus
浏览 0提问于2020-09-26得票数 1
我试图在图形上绘制轴，但是当我用下面的一行添加svg时，我会收到一个TypeError: d.join is not a function错误：
svg.append("g")
.attr("transform", "translate(0," + height / 2 + ")")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(" + width / 2 +
浏览 2提问于2015-07-03得票数 2
回答已采纳
2回答
我需要调用本地javascript中的click操作。我得到了以下元素：
<svg class="pull-right svg-cross ng-isolate-scope" xmlns="http://www.w3.org/2000/svg" data-svg-icon="" icon="cross" ng-click="dismissBanner()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href
浏览 0提问于2015-10-22得票数 1
回答已采纳
我正在尝试用Javascript创建一个SVG多边形。
当我尝试使用以下Javascript代码创建SVGPoint时：
var p = new SVGPoint();
我收到以下消息：- TypeError:非法构造函数
浏览 0提问于2010-11-22得票数 8
回答已采纳
4回答
当尝试以这种方式加载SVG映像时：
export const query = graphql`
query {
fileName: file(relativePath: { eq: "logo_large.svg" }) {
childImageSharp {
fluid(maxWidth: 1060) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
浏览 0提问于2018-12-05得票数 10
回答已采纳
我不知道如何使用Snap.svg和角v4.0，所以我读了文章。我尝试了@moeabdol (npm install .，scripts: .，declare .，s.circle(...))的解决方案，但是我得到了以下错误：
错误TypeError: s.circle不是一个函数
但是，我可以用Snap.load(...)加载外部SVG。
为什么s.circle不为我工作？
浏览 0提问于2018-08-02得票数 3
回答已采纳
正如提到的，我试图执行可折叠树的代码。但是，对角方法似乎不适用于v4 (我可能错了)。
适用于：
var diagonal = d3.svg.diagonal()
我知道这个错误：
TypeError:无法读取未定义的属性“对角线”
在v4中，什么是等价的？查看D3.jsAPI引用并没有给我任何线索。
浏览 16提问于2016-11-28得票数 50
回答已采纳
1回答
我正在尝试应用建议来捕捉几个转换的结束。但是在我的本地文件中，我得到了一个Uncaught TypeError: t.call is not a function错误。守则如下：
var svg = d3.select('svg');
function endall(transition, callback) {
if (typeof callback !== "function") throw new Error("Wrong callback in endall");
if (transition.size()
浏览 0提问于2018-09-07得票数 1
回答已采纳
我正在尝试从网页中提取我用D3创建的SVG。因为我使用d3.csv来读取图像的数据，所以我使用本地web服务器。我一直在尝试使用Andrew Reagan的phantom-crowbar.js代码()，虽然这对于从http://页面和file:///页面提取SVG非常有效，但当我尝试从地址为http://localhost:8000的页面提取SVG时，我收到了以下消息：
TypeError: null is not an object (evaluating 'svg.setAttribute')
phantomjs://webpage.evaluate():32
phant
浏览 2提问于2015-06-02得票数 2
我使用svg-svg zoom库()，它在我的网站上的页面上运行的时间大约是75% (在Chrome和Firefox的最新版本中都是如此)。
因为我假设这是由于我的一些配置错误，我想知道我是否犯了一个错误，或者是否有特定的场景可能导致了这一点。
我的代码：
(function (mw, $) {
$(document).ready(function () {
panZoomInstance = svgPanZoom('#stylometricanalysis-svg1', {
zoomEnabled: true,
浏览 2提问于2016-06-28得票数 1
3回答
如何在角4中将类和路径动态地添加到组件中？
在我的组件中，当我将以下代码粘贴到组件模板中时，图标工作；
<svg class="another-class iconId">
<use xlink:href="/icon-path/def.svg#iconId"></use>
</svg>
但是当我试图绑定这样的类时：
<svg class="another-class {{iconId}}">
<use xlink:href="/icon-path/def.svg#{
浏览 5提问于2017-09-25得票数 1
回答已采纳
我的问题是：
我尝试在svg中添加很多矩形。但不管我试了多少次，Chrome浏览器总是显示警告信息。
Uncaught TypeError: svg.selectAll(...).data(...).enter is not a function
at (index):39
(anonymous) @ (index):39
它说问题是这样的：enter()找不出原因。
我的代码如下
整个脚本是
<script type="text/javascript">
//d3.js code
//import csv data
va
浏览 0提问于2019-12-26得票数 0
1回答
是什么导致了下面的TypeError？
TypeError:回调未定义
我的代码如下所示：
<script>
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
.call(drag)
var drag = d3.drag()
.on("start", start)
function
浏览 0提问于2018-04-07得票数 0
回答已采纳
2回答
在使用Firefox查看时，我试图使用Java脚本更改html页面上所有SVG标记的高度属性。我首先检查浏览器是否为FF，然后得到svg的当前高度，然后添加30。
我写的脚本不起作用：
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
var x = document.getElementsByTagName('svg')[0].getAttribute('height');
var svgHeight = x + 30;
document.getElements
浏览 2提问于2015-11-13得票数 1
回答已采纳
1回答
SVG动画没有方法
、、、
我有一个SVG (html)：
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="radius-selector">
<!-- Circle -->
<circle id="radius-circle" cx="50%" cy="35%" r="25%" stroke=&
浏览 0提问于2013-01-04得票数 1
回答已采纳
我试图在SVG中创建一个文本节点并更改它的颜色，但是它一直返回“未定义”
const shp = document.createElementNS("http://www.w3.org/200/svg","text");
const textNode = document.createTextNode(this.data["ctx"]);
const shp.appendChild(textNode);
shp.style.fill = 'red';
以下是我的结果：
Uncaught TypeError: Cannot set
浏览 1提问于2021-04-25得票数 0
回答已采纳
1回答
)代码给出以下错误。请帮帮我，我在放大圆圈上的onClick时犯了什么错误？
同样，如果有人能给我一些想法，如果我想直接放大到第三圈而不点击它，我会非常感激；我该怎么办？
ERROR: Uncaught TypeError: Cannot read property 'apply' of undefined
at qr.call (d3.min.js:2)
at SVGCircleElement.clicked (index.html:52)
at SVGCircleElement.<anonymous> (d3.min.js:2)
这是密码
浏览 4提问于2020-01-09得票数 1
1回答
HTML: svg对象和脚本，应该改变svg对象的颜色，但是由于某种原因，它不会吗？
<object id="object" type="image/svg+xml" data="play-pattern--light.svg"></object>
<script type="text/javascript">
window.onload=function () {
var a = document.getElementById("
浏览 2提问于2016-03-04得票数 1
回答已采纳
我正在尝试将一个D3图例添加到我的圆环图中，我遵循了下面的示例：。圆环图呈现得很好。
但是，我遇到了以下错误：
在d3.legend()函数中，我得到了这样的错误：“未捕获的TypeError: node.getAttribute不是函数”和“未捕获的TypeError: this.querySelectorAll不是函数”。
我不确定why...any的想法？
// Alerts.js
renderBody() {
const {list, currentProgram} = this.props
const width = 260;
const height = 2
浏览 9提问于2017-12-29得票数 2
1回答
下面是D3示例中的js代码。
var MsaSubGroup = svg.append("g").attr("id","MsaSubGroupData").attr("class","pieChart");
Donut3D.draw("MsaSubGroupData", getData(MSA), 450, 150, 130, 100, 30, 0.4);
var wedges = MsaSubGroup.selectAll("g.slices").data(datum).ent
浏览 2提问于2014-11-19得票数 1
回答已采纳
4回答
Vuejs方法不触发
、、、、
当我从jquery选择器调用一个vuejs函数时，它没有触发。我在vue组件中集成了d3-dagre图。当我为节点设置一个单击操作时，它不会触发vuejs方法。在下面的代码中，getJobid()没有触发。找到下面的vue组件代码以及最后的错误。
Vue组件：
export default {
name: 'dagView',
created () {
console.log('test2')
},
mounted () {
var g = new dagreD3.graphlib.Graph().setGraph({})
浏览 57提问于2017-08-09得票数 2
问题可以告诉我如何将SVG元素转换为字符串吗？
我使用将我的SVG转换成图像。
它必须先在画布中呈现，canvg()方法需要一个SVG STRING
代码：
function updateChartImage(){
canvg(document.getElementById('canvas'),expecting ` svg string`);
var canvas = document.getElementById("canvas") ;
var img = canvas.toDataURL("imag
浏览 10提问于2012-07-09得票数 16
回答已采纳
1回答
我正在与d3合作，以便可视化一个力有向图。
我使用一个cdn文件启动了我的项目。但是我发现了一个问题，如果我使用这个代码：
像..functions一样的d3.forceSimulation()是不可用的，至少它会引发一个错误。所以我把网址改成了这个：
...according到本例，
但是新的问题出现了：Uncaught TypeError: Cannot read property 'append' of null，意思是，svg。
我试图使用d3安装npm。所以我引进了d3
import * as d3 from 'd3'
但是，我无法
浏览 1提问于2017-06-14得票数 0
我有一个ReactJS应用程序。我将SVG图像动态生成为JSX组件。到目前为止，一切正常--但是现在我需要使用SVG作为画布元素中的图像源。这对于静态SVG文件很有效，但是如何将动态SVG放到画布中呢？ 代码段中将显示一个简化版本。componentDidMount方法中显示了两种调用drawImage的方法:创建未挂载的SvgSource和使用对页面上挂载的are的引用，但这两种方法都失败了。 class App extends React.Component {
// On mount, paint the SVG in the canvas
componentDidMount
浏览 40提问于2019-02-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
