3回答
是否可以在React中基于Parent中的道具进行动态导入？ 对于我的代码： 父级 <Parent>
<Child icon="svg1" />
<Child icon="svg2" />
<Child icon="svg3" />
</Parent> 孩子 import svg1 from './svg1.js'
import svg2 from './svg2.js'
import svg3 from './svg3.js' s
浏览 27提问于2020-07-02得票数 0
2回答
我正在尝试使用像Two.js或SVG.js这样的SVG库，并动态地更改它们的动态生成的SVG元素，以便使它们具有响应性。这里有一个基本的示例，展示了预定义的内联SVG如何响应。
它涉及到将SVG元素包装在容器中、分配一些CSS值、添加viewBox和preserveAspectRatio属性。这似乎是做响应式SVG元素的常用方法：
<div class='container'>
<div class='svg-container'>
<svg version="1.1" viewBox=&#
浏览 1提问于2014-05-17得票数 0
1回答
下面使用数组语法一次性绑定静态和动态类。静态可以工作，但动态不能。 动态类绑定如何与SVG一起工作？ https://codesandbox.io/s/dynamic-class-binding-svg-in-vue-js-jc5qg <!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.static {
浏览 30提问于2020-06-30得票数 0
回答已采纳
我在动态Next.js应用程序中有一条路径，我只想输出SVG。它不是静态SVG，而是基于后端API中的值以编程方式创建的动态SVG输出。但是我只想要SVG输出，而不是我在其他地方使用的包装html、body等。
有什么想法吗?怎么能有一条只输出页面上的内容的路线？
浏览 1提问于2022-11-21得票数 0
回答已采纳
我正在尝试在three.js ()中使用SVGRenderer。该示例向您展示了如何动态生成SVG元素(圆)。我想导入计算机中已有的SVG文件。我该怎么做呢？
createElementNS命令似乎不支持导入SVG文件？
实际上，我希望在three.js场景中显示我的image.svg。
浏览 1提问于2015-10-15得票数 5
回答已采纳
当前用于在网络浏览器中制作“交互式svg”的库实际上是使用javascript来动态地操纵页面中的SVG对象，但是实际上并没有在svg标签本身中嵌入使svg动画化所需的完整的javascript。像d3.js，protovis，svg.js等库。 但是也可以创建独立的交互式SVG，例如Brendan Gregg的flamegraph工具，例如：http://www.brendangregg.com/FlameGraphs/cpu-bash-flamegraph.svg 有没有办法在网页中创建一个独立的、交互式的SVG？当然，您可以生成交互式SVG服务器端(例如，Brendan使用Perl库来
浏览 7提问于2019-09-07得票数 1
回答已采纳
1回答
我想要动态导入svg，我无法在我的超文本标记语言页面中显示svg我使用Angular js:我有这样的代码: Directive.js：
angular.module ('SvgMapApp') directive ('svgMap', ['$ compile', function ($ compile) {
return {
restrict: 'A',
templateUrl: 'Scripts/widget.svg',
link: functio
浏览 0提问于2017-12-26得票数 0
我想将一个简单的动态svg片段转换为服务器上的PNG数据URI。就像这样：
var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'
console.log('<img src="data:image/p
浏览 4提问于2015-08-01得票数 12
回答已采纳
1回答
内插SVG的内禀比
、、、
我正在用JS构建一个内置的SVG。SVG的比例(又名比例)是动态的:在任何时候它都可以从JS中改变。
我想让SVG响应。这就是我用<img>做的
img {
width: 100%;
height: auto;
}
但这对<svg>来说是行不通的。小提琴：
的目标是缩放内嵌的SVG元素，以便在不扭曲其比例的情况下水平地适应容器。CSS不应该知道当前的SVG比例.
浏览 8提问于2014-12-23得票数 0
1回答
我正在创建自定义动态SVG，其中我希望使rect元素的X和Y属性动态，如下所示：
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40">
<defs>
<ref id="abs" param="abs" default="5"/>
<ref id="ord"
浏览 3提问于2021-12-09得票数 0
2回答
我创建了一个标记，以显示在line元素的末尾。但是我的问题是，当标记标记是动态生成的时，它不会显示在行尾。
我所做的就是首先将svg添加到html主体中。
var svg = d3.select('body').append("svg").attr("width", 300).attr("height", 300).attr("id", "cloud");
然后我将标记附加到svg中。
$('svg').append('<defs><marker id=
浏览 1提问于2013-09-05得票数 1
回答已采纳
我找到了一些可以创建动态svg页面背景的JS。我只想使用它在一个响应式数码静脉与class=“锻炼”。我刚刚开始学习JS，我不知道如何修改这段代码来获得svg所在的DIV的高度。因为DIV是全屏幕宽度，所以我只需要得到高度。以下是相关代码：
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width',window.innerWidth);
svg.setAttribute('h
浏览 2提问于2018-04-23得票数 0
2回答
尝试将外部svgs加载到动态创建的svg中，但仍然访问加载的svgs的属性。这就是为什么我使用d3.xml，但还没有弄清楚如何将它集成到用d3创建的动态svg中。
代码和js控制台代码生成此svg
<svg id = "svgObj">
<g class = "grp"></g>
<g class = "grp"></g>
</svg>
我试图在每个元素中加载circle.svg，所以看起来如下所示
<svg id = "svgObj">
浏览 2提问于2014-02-12得票数 0
回答已采纳
1回答
我想使用d3.js创建一个动态垂直规则，就像这里的：。
我在这里询问了如何使用超文本标记语言()创建一个，但是使用超文本标记语言的解决方案在立体主义svg上并不是很有效，因为它会闪烁和消失。
现在，我想使用SVG创建一个。
我曾尝试使用这里的代码()创建一个，但我无法将其放在现有的svg上并使其动态更新。
任何帮助都是非常感谢的。
编辑:现有的svg是由一个名为cubism.js的d3插件创建的，所以我没有访问底层svg的权限。虽然它本身工作得很好，但这个svg会像这样向下推其他元素( svg行在左边)：
我想要在现有图形上的规则，这就是为什么我提到在另一个svg上定位的原因。如果我第一
浏览 2提问于2013-04-27得票数 0
1回答
我试图使用jQuery的事件委托.on方法(类似于 JSfiddle )向页面中动态添加的SVG元素添加一个类。(也不按预期工作，先添加圆圈，然后添加边框)
据我所知，它不能工作，因为没有涉及不同元素( svg和button )的事件的传播。
我的实际应用程序有一个与d3.js的SVG容器相同的DOM级别的复选框，我试图通过向一些动态添加的SVG元素( .on复选框change )中添加/删除一个SVG类来“过滤”SVG中的元素。
还有其他方法可以做到这一点吗？
浏览 2提问于2015-11-04得票数 0
回答已采纳
这段代码在单击组件button.After时动态添加一个svg映像，我试图将警告函数传递给动态创建的组件，但它不响应单击。请帮帮忙。我试图使用id、class、path传递函数。
<html>
<head>
<title>buttons</title>
<style>
input[type="button"]{
color:#050;
font: old 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:
浏览 1提问于2014-06-16得票数 0
回答已采纳
1回答
我正在使用d3.xml动态加载svg映像。然后，我想使用d3.behavior.zoom()将缩放功能附加到这个svg上。
有人能解释一下如何将d3.behavior.zoom()与加载的svg链接起来吗？我在网上找不到任何东西。
见下面的现行代码：
JS
<script src="http://d3js.org/d3.v3.js"></script>
d3.xml("map.svg").mimeType("image/svg+xml").get(function(error, xml) {
if (error)
浏览 1提问于2016-11-01得票数 1
回答已采纳
2回答
还在学习d3.js。
在使用.selectAll(" SVG ")时，我想忽略svg面板的选择。
我正在构建一个可视化的包括四个SVG面板。顶部的SVG面板用于显示用于可视化的标题/标题信息。
var svgHeader = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", 100)
.append("g")
浏览 6提问于2013-09-03得票数 0
回答已采纳
我尝试做的是从HTML中的Javascript代码动态地设置嵌入式SVG文档中的Javascript脚本引用。
我假设这与将节点动态添加到嵌入式SVG文档中的适当位置一样简单。
我发现节点实际上是在运行时添加的(可以用Firefox Inspect元素检查)，但引用中包含的Javascript代码在需要执行时并未执行。
有人知道这是怎么回事吗？为了让SVG能够调用Javascript代码中的函数，还需要做什么吗？
以下是一个简化的场景：
test.html (嵌入SVG)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
浏览 1提问于2013-05-19得票数 1
回答已采纳
1回答
如何向svg元素中添加一个圆
、、、、
我试图动态地将圆圈放入svg中。在index.html文件中，我创建了这个svg部分。
<svg id="svgArea" width="500" height="500"></svg>
在js文件中，我尝试了以下操作
$('#svgArea').append('<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yel
浏览 2提问于2015-11-19得票数 2
回答已采纳
1回答
我试图在用jQuery为其动画添加动态DOM的同时，实现SVG元素的动画。我使用JS生成DOM，因此HTML页面没有任何用于此动画的元素。当我动态添加它时，动画不会在Chrome(16)中开始，但它在FF(8)中工作。
如果我删除用JS生成动态doms，并将它们静态地放到HTML页面中，那么动画将是完美的。
我已经为它创建了fiddle：
我把一个svg dom static放到超文本标记语言页面中，然后我用jQuery在准备好的文档上克隆了那个元素，在这个场景中，后来用JS添加的那个元素将根本不会有动画！！(这适用于FF)
请帮帮我。
谢谢，切坦。
浏览 2提问于2011-12-15得票数 2
回答已采纳
1回答
Webpack动态导入表达式无效
、、、、
我用的是对webpack的反应。
我有一个文件夹里面有上百个SVG。
因此，我使用webpacks动态导入语法，比如import('../images_svg/' + svgData.path + '.svg')，遗憾的是，这是行不通的。另外，我正在使用svg内联加载程序。
这就是我得到以下例外的原因：
<--- Last few GCs --->
95733 ms: Mark-sweep 1301.0 (1434.6) -> 1303.2 (1434.6) MB, 61.8 / 0.0 ms [allocation failure]
浏览 11提问于2017-10-01得票数 1
回答已采纳
1回答
我已经成功地在一个大型应用程序中处理了我的大多数图标，但是仍然有两个用例没有被捕获。
角模板中使用的动态路径
<md-icon md-svg-src="{{'/assets/icons/ic-' + $ctrl.icon + '.svg'}}"></md-icon>
在传递给角模板的组件中用作可变的路径
也就是说，类似于…的东西
class Comp {
this.settingsLinks = [
{name: 'advanced settings', icon: '
浏览 0提问于2018-11-15得票数 1
回答已采纳
1回答
是否可以在Inkscape中以SVG的形式进行图表或可视化，然后让d3.js用正确的数据动态更新它？比如根据一些JSON绘制条形图和更改数字。
我还没有开始使用d3.js，我担心它只能产生SVG本身，并且无法处理复杂的绘图。
浏览 0提问于2015-03-26得票数 1
回答已采纳
1回答
我想动态地获得SVG图标。我找到了一种方法来做这件事，但我似乎犯了一些错误。我在哪里做错了？
Icon.js
import React from "react";
import { ReactComponent as Bollards } from "./icons/bollards.svg";
import { ReactComponent as Earthquake } from "./icons/earthquake.svg";
import { ReactComponent as Fire } from "./icons/fire
浏览 0提问于2021-01-25得票数 2
回答已采纳
3回答
我试图根据浏览器的大小动态调整svg的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<script type= 'text/javascript' src ='../libraries/d3/d3.v3.min.js'> </script>
<meta charset="UTF-8">
<title>CIQ workflow</title>
<style type
浏览 4提问于2014-02-18得票数 4
回答已采纳
我正在尝试用three.js创建一个配置器，但是我需要改变产品的颜色，我想我可以使用svg作为纹理，改变svg的填充属性并很容易地更新纹理，但是我没有很好的效果。
目前我所拥有的是
使用svg作为纹理应用的-A 3D模型，但svg被放置在外部文件(“TextureLoader /texture.svg”)中( three.js也在缩小纹理的大小，但我认为这是一个映射问题)
-The svg是分层的，因此我可以手动更改颜色并应用它。
但是我想让它动态化，你选择一种颜色，它会自动更新作为纹理应用的svg。
有什么想法吗？
谢谢!
浏览 66提问于2017-08-29得票数 0
回答已采纳
我希望在修改外部svg文件时使用外部css / js文件，但是，在将svg文件“导入”到html中时，它的“子标记”(如路径)不会被导入，因此css和js不能更改它。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<object data="map.svg" type="image/
浏览 6提问于2020-06-01得票数 1
回答已采纳
我有一个Vue.js组件，它动态地构建svg元素的内容。为了简单起见，假设内容是<circle cx="50" cy="50" r="60" />
该组件通过操作一个名为svg的数据变量来做到这一点。
data() {
return {
svg: '<circle cx="50" cy="50" r="60" />',
foobar: 'foobar',
};
},
我在父组件中有一些特定的svg
浏览 6提问于2019-12-04得票数 0
回答已采纳
1回答
我试图在用jquery动态添加DOM元素的同时制作SVG元素的动画。如果我将这些元素添加到<body>中，如下所示，它的working.Working示例是
<svg>
<script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>
<circle cx="60" cy="60" r="20" style="fill: pink; stroke
浏览 0提问于2013-12-13得票数 4
我使用jspdf来捕获Hichchart的内容，它是通过动态单击id动态生成的。在这里，当我点击submit1按钮时，不同的高图表会用动态id.Again生成，当我点击下载按钮时，它会下载pdf.I中动态创建的图表内容，我可以下载，但是相同的图表正在重新下载，而页面上的图表则不同。我已经更新了代码在这里演示，谁能帮我，我只是把html和javascript代码在这里。
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
浏览 0提问于2018-11-05得票数 0
回答已采纳
1回答
所以我有这个svg。
<svg width="0" height="0"><clippath id="4vIt5" clippathunits="objectBoundingBox"><path d="
M 0.15, 0.15
L 0.35,0.15
C 0.35 0.15 0.65 0.15 0.65 0.15
L .85,0.15
L 0.85,0.35
C 0.7 0.35 0.7 0.6
浏览 4提问于2020-12-14得票数 1
1回答
我正在尝试旋转文本块，它应该总是粘在红色矩形的底部(就像在Figma中一样，但更简单)。例如，如果我将矩形旋转180度，文本应该在顶部，并且它不应该进入矩形可视部分或与其高度偏离。我怎么才能做到这一点呢？
也许它是关于转换原点的，但我已经打破了我的头，试图动态设置它。
有一个最小的fiddle包含由svg.js创建的rect和文本元素(svg.js不是交易的一部分，所以你可以用纯css来做)：
代码如下：
<head>
<link rel="stylesheet" href="https://rawcdn.githack.com/svgdotjs/s
浏览 13提问于2021-03-05得票数 0
回答已采纳
1回答
我正在尝试，它将任何我需要的东西转换成一个动态模块，并将代码拆分。
import(`resources/assets/images/svg/${this.name}.svg`).then((module) => {
this.svg = module;
}).catch(error => 'An error occured while loading the svg');
然后，当“承诺”触发时，代码将被注入到页面中，并带有一个脚本标记。但脚本标记使用的是http而不是https。
混合内容:在'‘处的页面是通过HTTPS加载的，但是请求一个不安全
浏览 1提问于2017-07-27得票数 1
回答已采纳
1回答
我想在Angular Js应用程序中实现交互式svg。下面是我将使用的Svg的简要介绍。我知道如何在angular中使用Svg，但这个问题的目的不是这个。我想让它具有动态性。就像当我点击“旁遮普”时，svg会放大并向我显示区域，当我单击某个特定区域时，它会向我显示我将通过后端获取的数据。所以我很好奇，这有可能吗？
浏览 1提问于2017-06-15得票数 1
我有一个站点，我想用JS动态地生成许多svg。
我动态地制作它们，因为它们就像20.000，而在服务器上把它们作为真实的图像将是一场噩梦……
所以，我想知道这些标记为xml的图片是否会被Google作为图像索引，也可以在图像搜索模式下查看。
这里有一个svg中的“图像”示例，这是一个愚蠢的例子，但它是为了明确我所说的内联SVG的含义：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green
浏览 0提问于2020-06-21得票数 2
1回答
如果我的问题看上去很奇怪，很抱歉，但是我对javascript/nodejs/react非常陌生，不能真正做到以下几点：
我制作了一个使用SVG.js来生成SVG-s的模块，我想在不同的应用程序中使用它(在Node.js中以及在React应用程序中)。在React中，我可以使用SVG()创建一个SVG对象。如果我想在Node.js中创建一个DOM元素，那么我需要事先创建一个DOM元素并将其传递给SVG()
const window = exports.createSVGWindow();
const document = window.document;
registerWindow(wind
浏览 3提问于2022-11-16得票数 0
我正在寻找一种方法来获取SVG路径信息(基本上是一个坐标字符串)，并用Actionscript动态绘制它。锦上添花的是，如果这些形状可以检测到鼠标事件来触发JS，并动态更改它们的外观(填充、笔触等)。
我目前正在尝试使用SVG来做类似的事情()，但是在IE中太慢了。我也试过谷歌的SVG Web ()，它基本上就是我想要的(它可以在IE中将SVG转换成Flash )，但同样，它很慢--这就是为什么我在考虑用Flash做所有的事情。
有谁知道一些链接可以给我指明正确的方向吗？
浏览 1提问于2009-10-22得票数 0
1回答
我似乎无法将我的xaxis和yaxis放在SVG的底部和左边。
<!DOCTYPE html>
<html>
<head>
<style>
svg {width:350px; height:280px;border-style:solid;}
</style>
</head>
<body>
<svg />
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
浏览 0提问于2016-04-28得票数 0
回答已采纳
我正在尝试在node.js中生成一些谷歌图表服务器端。
jsdom.env({
html: '<!DOCTYPE html><html><head></head><body><div style="width: 900px; height: 500px;" id="googlechart"></div></body></html>',
scripts: ['https://www.google.com/jsapi&#
浏览 1提问于2013-12-20得票数 0
1回答
如何用D3.js动态地改变直线插值？
也就是说，为什么下面D3.js示例中的“Toggle”按钮不更新插值，以及如何修复它？
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<style>
svg {width: 200px; height: 200px; border: 1px solid gray;}
.line
浏览 3提问于2014-05-22得票数 1
回答已采纳
我尝试使用javascipt创建动态svg 我的结果是 <svg xmlns='http://www.w3.org/2000/svg' viewBox='5279 1710 12.125 12.125'>
<g transform='translate(4311 1165)'>
<path fill='#fffff' d='M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6&
浏览 15提问于2019-02-26得票数 0
回答已采纳
2回答
我使用svg.js和dragg.js来移动一系列动态创建的对象(rects和圆圈等)。它们都在一个名为nodes的组中，我可以获得被拖动的项目的位置，但是我无法尝试检索
G id="dyanmicidIcreated"
我需要这个来识别哪个SVG对象被移动了？
nodes.mouseup(node => {
console.log("x: "+node.clientX)
console.log("y: "+node.clientY)
})
浏览 1提问于2019-01-05得票数 2
回答已采纳
我们的Webpack包包含用于动态导入图标的占位符。动态导入示例如下：
const { icon: iconName } = this.props;
const faIconName = `fa${iconName.replace(/./, c => c.toUpperCase())}`;
import(
/* webpackInclude: /\.js$/ */
`@fortawesome/pro-light-svg-icons/${faIconName}`
).then(faIcon => {
if (this.mounted) {
this.setSta
浏览 4提问于2019-05-29得票数 3
4回答
我正在尝试在Google Maps中创建一个动态SVG标记(基本上让SVG的文本部分针对每个标记进行更改)，但我在处理它的动态方面遇到了困难。正如您在下面的代码中所看到的，我可以使用new google.maps.MarkerImage()从静态url创建一个SVG标记。
var marker = new google.maps.Marker({
position: new google.maps.LatLng(38.4269929, -81.7921109),
icon: new google.maps.MarkerImage('https://dl.dropboxu
浏览 0提问于2014-06-27得票数 2
1回答
我在我的网站中启用了静态和动态内容压缩。
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files" dynamicCompressionDisableCpuUsage="90" dynamicCompressionEnableCpuUsage="70">
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"/&g
浏览 1提问于2013-07-07得票数 1
1回答
我正在尝试通过const对象动态加载SVG，以便在其他代码块中轻松重用。但是SVG没有显示出来。
当我在顶部导入svg并将其加载到<Img src='../../images/svg-1.svg' />中时，它可以正常工作，但我希望动态导入它以重用它，并在其他块中轻松地更改svg。
请检查以下代码：
Data.js
export const homeObjOne = {
id: 'about',
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine: '
浏览 0提问于2021-04-06得票数 1
2回答
我希望根据用户在CircleSVG中的鼠标位置(点击)或将其移动到SVG的中心(移动弹出内容和箭头)来重新定位弹出器(目前位于循环SVG的右侧)。有可能动态地改变它吗？
const popover = new bootstrap.Popover(document.getElementById("test"), {
html: true,
sanitize: false,
trigger: 'manual',
浏览 2提问于2021-07-15得票数 3
回答已采纳
当在动态创建的SVG元素(比如由raphael.js创建的元素)上触发事件时，有没有好的方法避免IE7产生"Error: Failed“？
我认为当jQuery查看我的实时处理程序以检查SVG元素是否与我指定的任何实时选择器匹配时，会产生"Error: Failed“。现在，我手动绑定调用
e.stopPropagation();
对于每个事件(mouseenter、mouseleave、click等)拉斐尔制作的SVG。
浏览 0提问于2010-12-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
