我如何创建一个框（rect？）来使用SVG调整自身大小以适应其中的文本？对不起，答案花了我这么长时间，但我正在学习如何将ECMAScript与XML DOM一起使用 好的。因此，假设您的文档结构如下所示： <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0

我可能会遇到什么困难呢？正如一些人所评论的，除了D3依赖Javascript的一些特性之外（不仅在语法上，在语言本身的性质方面更是如此）-它还取决于DOM和一些解释SVG标记的方法——所有这些都包含在浏览器环境中 你考虑过这个问题吗？我一直认为D3填补的一个空白提供了一些与R中支持的数据驱动的可视化方法相同的方法，但只是在浏览器环境中 现在-这并不是说R可以做D3可以做的任何事情，反之亦然-但就可视化而言，有很多重叠，这取决于您需求的性质-R可能正是您想要的。如果是这样的话，有一个很大的库叫做，

我试图在SVG行的起点/终点使用实线，但标记使用它们保留形状的值。有什么办法可以防止吗 以下是我当前的SVG： <svg xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="start" refX="5" refY="5" markerUnits="userSpaceOnUse" mar

是否可以在没有光栅化效果的情况下将一个SVG包含在另一个SVG中？我试过这个 <svg version="1.2" width="600.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="655.813953488" width="600.0" x="0" xlink:href="A.svg" y="0"/> <im

我对这个密码有意见，为什么外来物体的孩子会从面具里出来？ 这是我的密码 .pos和.pos2应该在掩码中。。。我的错误在哪里？我想你的错误是 只尝试Chrome（也看看Firefox）和 假设Chrome是对的，而你错了 我能想到的解决这个问题的唯一好办法是。你说得对，我几个月前在Safari上测试过它，而不是在Firefox上测试过。。。

我有一个基于SVG的加载动画，也称为“”，但我想知道我是否可以通过使用基本动画（淡出属性）并在我的标记中引用它来更有效地编码它 <defs> <line id="bit" x1="50" y1="25" x2="50" y2="10" stroke="#000000"> &l

我一直在玩弄Raphael JS，但没有找到任何解决方案将一组/一组路径作为组而不是单独旋转 一组/一组路径： var bobble = map.paper.set(); bobble.push(map.paper.add([{ "fill":fill, "stroke":"none", x: 50, y: 50, width: 100, height: 100, "type":"rect", "r": 4 },{ "fi

我想更改rect <clipPath xmlns="http://www.w3.org/2000/svg" id="svge-1"> <rect fill="none" x="0" y="0" width="761" height="231" /> </clipPath> 根据这一点，这应该很容易，但问题是这里的rect没有id 如何向其添加id，或在此处访问rect的height？使用DOM检索元素还有其他几种方法 您可以使用getElemen

通过在我的SVG上设置viewbox属性并删除width，我可以强制SVG适应其容器的大小： <div id="chart"> <svg viewbox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> </svg> </div> 当我增加浏览器的大小时，SVG会放大。不幸的是，当我缩小浏览器的大小时，情况并非如此。如何确保SVG也收缩以适应需要 在Fir

我有一个脚本（如下），它可以从svg文件导出到各种大小的png文件。这很有效，但我需要更多。在导出之前，我需要能够启用和禁用图层。 因此，例如，在#Android行之后，我需要 启用层android并禁用层ios 我该怎么做 set -x # Windows INKSCAPE="/C/Program Files/Inkscape/inkscape.exe" OPTS=--export-background-opacity=0 # Note that directories must alre

我正在尝试从字体图标（icomoon.io）移动到SVG精灵是否可以使用SVG精灵而不需要为每个图标实例添加标记？ 我真正喜欢字体图标的地方是，我不必在HTML中添加任何附加元素来显示图标。我通常只针对我希望图标显示的任何元素创建一个简单类，然后使用伪选择器显示图标，例如： <h1 class="news">News</h1> h1.user:before { font-family: 'icons'; content: '\news'; } 新闻 用户：之前

我是SVG新手，特别是在SVG动画方面，所以我不知道如何做到这一点。我需要扭转动画一旦完成，并重新开始。我找到了这个答案并尝试了被接受的答案，但我不知道怎么做。请帮帮我，伙计们。这是我的密码： .s0{ 溢出：可见； } .st0{ 剪辑路径：url（#SVGID_6)）； 填充：#FF0500； } .st1{ 不透明度：0.6； 填充：#FF0500； } .st2{ 剪辑路径：url（#SVGID_8)）； 填充：#FF0500； } .st3{ 剪辑路径：url（#SVGID_2)）；

我有一堆svg图像（1.svg 2.svg…），我想将它们居中，并将画布调整为所有图像的相同值。假设image 1.svg具有w。600和h。800和2.0。svg具有w。1000和h。400我想为1000x800和中心图像设置画布。因此，图像不会被调整大小，但它们的侧面会有额外的空间->1.svg仍将是600x800，但在尺寸为1000x800和2.svg的画布中会是1000x400，但在尺寸为1000x800的画布中会是1000x400。可以在命令行中执行吗？使用inkscape、image

我有一个SVG定时器。有一个显示当前状态的路径。但是路径重叠严重，正如您在我附带的屏幕截图中所看到的： 此屏幕截图的检查器代码为： <svg class="ion-timer-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" style="width: 100%; height: 100%;"> <circle fill="none" cx="60" cy="60" r="55" style="stro

嗨，我正在做SVG。。。。我想读取元素的节点，这些节点有很多数字，但我要读取的节点形状不规则，我还必须对其应用限制…有人能帮忙吗…提前谢谢 请澄清。我不明白的是：1）“有很多数字”-你是说属性中有数值吗？文本节点？路径？什么2） “节点形状不规则”-这到底意味着什么？节点，如路径或形状的点？3） “必须应用限制”-什么类型的限制？具体是什么？请澄清。我不明白的是：1）“有很多数字”-你是说属性中有数值吗？文本节点？路径？什么2） “节点形状不规则”-这到底意味着什么？节点，如路径或形状的点？3）

我有一个像素艺术风格的图像，打算用SVG缩放到4倍大小。但是，以下代码会模糊图像的像素： <image x="0" y="0" width="1024" height="1024" image-rendering="optimizeSpeed" xlink:href="pixelart.bmp" /> 有什么属性可以解决这个问题吗？我认为image rendering=“optimizeSpeed”是最接近的。如前所述，它“应该使用重采样算法来实现快速渲染的目标

我用拉斐尔创造了一个动态的可视化。是否可以将画布上生成的图像作为SVG/PDF或其他图像格式下载？此处缺少一些信息，即浏览器支持、服务器/客户端解决方案以及成本是否合理。所以我会尽力给你一个详尽的答案 对于客户端解决方案，您可以使用。只需将SVG树提供给DocRaptor，这适用于生成SVG的浏览器（所有浏览器都是从2005年开始的，除了版本9之前的IE）。请注意，DocRaptor需要支付将文档转换为PDF的费用。对于将SVG树转换为PDF的免费服务器端解决方案，我建议按照中的建议使用 对于R

我正在尝试将SVG添加到我的doxygen文档中 第一次尝试是使用\image blabla.svg。这有点奏效了。。。但是，SVG包含另一个png引用，并且没有显示内部png。这在Chrome上有效，但即使在Firefox上也不起作用 继续阅读，我发现我可以使用或在tye标记上。我不确定使用强氧是否可以做到这一点 如何在我的doxygen文档中使用SVG？。。。一个选项是将SVG渲染为PNG，并将其正常渲染为doxygen。这可以使用从imagemagick转换来完成 丑陋的解决方案，等待更好

我使用的是rapahel版本2.0.0，出于某种原因，图像是 未在IE8中拖动（启动和移动被激发，但图像未被激活 移动）没有异常或错误。。。 我试着使用1.5.2版本，但我没有 onDragOver和snapTo方法，我需要这两种方法 有没有人有相同的问题和解决方法 代码如下： 谢谢大家! 已经修复，只需获取raphael.js v2beta的新副本……Dmitry更新了它！ 已经修复，只需获得raphael.js v2beta的新副本……Dmitry更新了它！ var start = fu

我有一个SVG，其代码如下所示： SVG生成的图像的“原始”尺寸为300px x 310px。我想将图像作为一个整体进行缩放，比如说50%。我尝试了多种方法来缩放图像，但我所做到的最好的方法是简单地将原始图像剪裁或“裁剪”到原始尺寸的50%的区域 使用PreserveSpectRatio、设置viewbox、尝试使用transform=“scale（0.5”）等都不起作用。我所要做的就是将原始尺寸缩放50%。transform=“scale（0.5）”肯定会起作用。你可能还做错了什么 尝试用

我的svg有问题。我想创建一个符号，将多边形（此处为六边形）及其背景图像（作为图案）分组： 我通过标记包含符号。问题是背景图像ground.png不可见（六边形填充为黑色） 我做错了什么 编辑：您没有做错任何事。您的测试用例在Opera中工作。Firefox在中存在一个关于的bug，因此您必须对示例进行如下重构： <svg width="600" height="624" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://

有没有一种直接、快速的方式将文件转换为格式 我可以将XPS转换为PDF，然后使用将其转换为SVG。 但是PDF->SVG步骤非常耗时，尽管这个过程似乎并不消耗CPU 我的理解是，因为XPS是一种基于矢量的格式，所以将其转换为另一种基于矢量的格式（如SVG）必须是可行的，并且比将基于光栅的格式（尽管我不完全确定pdf是否只是基于光栅）转换为基于矢量的格式要快得多 顺便说一句，我们的目标是在浏览器中显示基于矢量的图像，我有XPS文件 读取XPS并可以创建SVG文件 我用xpstosvg命令在Cygw

我试图在SVG中绘制一个带有阴影的简单圆，但由于某些原因，顶部和左侧边缘被剪裁。这在Chrome和Safari中都会发生 我正在使用w3schools教程中的代码，修改为使用圆形 我试着移动圆圈，增加SVG容器的大小等等，但得到了相同的结果。我还尝试用谷歌搜索各种dropshadow教程，并总是修改示例代码以使用圆圈。每次都是一样的结果 那么，如何在SVG中用dropshadow绘制一个简单的圆呢？事实证明，问题在于过滤器的偏移量。圆圈周围没有足够的填充物来容纳新添加的过滤器。要添加此属性

我希望为SVG文件添加语义，并希望使用schema.org术语。SVG有这样做的语法吗？我的第一次尝试是： <svg:text xmlns:svg="xmlns="http://www.w3.org/2000/svg" x="100" y="200" html:itemtype="http://schema.org/Person" xmlns:html="http://www.w3.org/1999/xhtml" >Joe Soap</svg:

Cufon已从fabric中删除，但我想使用自定义字体。 我用batic将ttf转换为svg，然后解析svg并将路径存储在JSON中。 其思想是使用此路径在fabric中构建文本 我的JSON如下所示： {" ":{"d":"","horiz-adv-x":"467"},"!":{"d":"M210 378L150 1122V1466H399V1122L340 378H210ZM160 0V281H390V0H160Z","horiz-adv-x":"559"},"\"":{"d":"M135

我已经设置了一个d3.geo.path，如下所示 // Projection var projection = d3.geo.mercator().center([LONCENTER, LATCENTER]).scale(MAPSCALE); // Path for projection path = d3.geo.path().projection(projection); 我的任务是在世界地图上绘制饼图，我正在使用path.centroid（）为大多数国家放置饼图，但是像美国和俄罗斯这样分

在本文中，当通过Ember.CollectionView向数组中添加新项时，我试图推送一个SVGcircle元素。但是似乎没有在SVG名称空间中创建g元素，因此： g元素正在添加到dom中 但是在DOM检查器中查找时，g元素没有SVG节点的属性 g元素未在SVG元素中呈现 不确定该问题是否与余烬或D3有关。我怀疑Ember创建的g标记是否应该为SVG使用适当的xmlns名称空间来创建，但不确定如何处理它 奇怪的是，当内容数组初始化时，上下文绑定工作正常，但当您添加任何其他对象时，上下文绑定工

我有一个三个圆圈的SVG图像，并用横截面绘制了维恩图。 我想在每个部分放一些物体，找出每个物体在哪个部分 我的SVG图像由七层创建，我想知道我的对象被放置在哪一层。请编辑您的问题，并提供您迄今为止尝试过的内容。可能有几种方法，但人们需要更多的信息。您是否至少可以在JSFIDLE上为图表提供SVG，理想情况下只需进行一点拖动。它也可能取决于拖动的对象，因此也包括这些对象。

我在D3中得到了一个饼图，用一个笔划来分隔每个切片。但是，我只想在切片的外部区域添加边界，而不是在连续线中，而是根据原始切片中笔划创建的间隙。请参阅我的图片以获得澄清。你有什么想法吗 看 您可以通过添加另一组用作边界的圆弧来模拟这一点 var arcBorder = d3.svg.arc() .innerRadius(outerRadius) .outerRadius(outerRadius + border); // etc arcs.append("path") .attr(

我有svg图标，但在Safari中它们根本不出现。 我花了两个小时寻找答案，到目前为止还不知道如何解决。 我认为我的svg文件有问题，因为我试着使用其他svg文件，它们工作正常 请在您的问题中包含代码，以便将来的访问者在链接页面离线时能够受益。您还应该看看这个。正如您提到的，我认为SVG有一个问题，在Illustrator中打开它会出现以下错误：“剪辑将在往返Tiny时丢失”。你从Illustrator导出时使用了哪些设置？@block14这是我的设置，我不认为这与我的设置有关，因为我在寻求帮助

我正在创建一个web应用程序，允许用户通过旋转/调整大小/移动一些svg字母来使用字体。在这之前一切都很顺利 我还想让用户能够围绕一个共同的中心（组的中心）一次旋转所有字母，这是一个问题，因为在我进行旋转后，如果我尝试单独移动每个字母，它不再垂直或水平移动，而是根据组的旋转量成对角线移动 有没有办法旋转这组字母并保留在标准x/y轴上移动每个字母的能力？我认为理想情况下，您必须将其分解为一些工作代码，就像在JSFIDLE中一样。听起来你可能想研究矩阵，getCTM，getScreenCTM，并解释

如何通过刷牙使圆点响应图表的变化？我尝试使用transfsorm属性，但效果不好。这是我的名片。下面是Coffescript # draw dots dots = focus.selectAll(".dot") .data(bubbleData) .enter().append("circle") .attr("class", "dot") .attr("r", (d) -> 2*Math.abs(d.surprise)) .attr("cx", xMa

请参阅小提琴：。只有两个SVG符号并排出现。由于某种原因，在两者之间会出现一个小“ux”。有人能解释一下发生了什么事吗？每个符号本身都显示良好。当两者同时显示时会出现问题。在Chrome上测试。以下代码直接从JSFIDLE复制： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title

假设我有一个svg路径和一段文本。我想知道它们在哪里相交。我不确定从哪里开始，因为svg路径的getBBox（）函数没有帮助 我应该从哪里开始？您可以通过getBBox（）获得文本边界框。不幸的是，正如您可能已经发现的，这不是一个紧凑的glyph边界框。它包括字体的完全下降高度和上升高度。然而，它应该会得到一个合理的近似值 下一步是确定路径到达边界框的位置。获得一个完美的数学解是非常困难的，但是有一些迭代方法更容易，并且给出了很好的结果 路径元素有一个可以提供帮助的参数：getTotalLeng

我有一个在inkscape中创建的svg映射，现在我想将其转换为raphaeljs，以帮助为web制作一个交互式版本，并利用IE的VML回退。svg文件看起来像我想要的，我曾经将其转换为raphael。但它没有出现。我想这可能是我不了解拉斐尔是如何工作的 是一个JSFIDLE，包含从转换文件中提取的示例 以下是来自JSFIDLE的js代码： var rsr = Raphael('map', '706.09003', '658.05029'); var field1 = rsr.path("m

我已经在力图和缩进树上实现了几何缩放 这允许平移和缩放。现在，我需要导航到预选的节点，这将使该节点位于视点的中心 据我所知，我需要计算节点到svg中心的距离，并将每个节点和边移动相同的距离。 我不确定这是否是正确的方法 请让我知道我是否在正确的轨道上 请参阅或，这也可能有帮助：+1@AJ_91谢谢。现在我需要弄清楚如何将翻译传递给现有的缩放侦听器。否则下一次缩放将跳到上一个位置。设置一个JSFIDLE，我们是否可以尝试一下：可能重复

我的SVG文档出现了一个（可能很小）问题： Eclipse警告我文档不使用doctype，所以我搜索并选择了完整的DTD: 问题是，我还使用了Thymeleaf来修改文档，因此我在根目录中声明了我的th名称空间（以及更多名称空间）： <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:th="http://www.thymeleaf.org" ... > 当然，现在eclipse抱怨我的Thyme

从设计机构发送的illustrator文件创建SVG（用于web）时遇到问题。导出的SVG看起来不一样，特别是因为受影响的区域应该看起来像人类角色的阴影区域。所创造的艺术相当复杂，我无权展示，但我只是在这里介绍一个复制问题的元素 原始.ai文件+此zip中导出的.svg： 我还将其保存在.eps中，并尝试导出，但没有任何区别 我正在寻找一个不会太伤人的解决方案，因为在原始艺术品中有很多元素，比如这个形状，而且大多数都有不同的颜色和形状 我试图访问SVG中的CSS，但无法更改渐变 使用Illus

我正在使用将一组svg图标转换为woff字体 在将图标转换为字体之前，其外观如下所示： 它在woff文件中的显示方式： 我的吞咽任务如下： gulp.task('icon-font', function() { gulp.src([paths.icons + '*.svg']) .pipe(iconfont({ fontName: 'icons', formats: ['woff'], timestamp: timestamp, a

我有一个矩形，左上角位于（x1，y1），用svg渲染。 当我重新缩放此矩形时，我希望新矩形的左上角位于同一坐标（x1，y1）。是否有一个公式来转换调整大小的Rect，以便实现此目的 更好的是，是否有更通用的方法，使rect可以与我选择的角重叠 编辑：我添加了我发现的这个JSFIDLE示例： . 我有一个矩形： <rect id="square" x="15" y="15" width="20" height="20" style="fill: none; stroke:black" /

我正在创建SVG文件，其中我知道画布的大小（以英寸为单位）。我要把所有的坐标都放进去。我用蜡染制作，它只允许以像素为单位设置画布大小（宽度/高度），没有设置viewBox的方法 因此，我的问题是： viewBox是处理从EMU到英寸转换的最佳方法吗？我更喜欢实际设置仿射变换，因为我们有时需要使用变换 使用蜡染是最初设置EMU中画布大小的最佳方法（蜡染会认为是像素）。然后创建svgdom。完成后，将DOM更改为以英寸为单位设置画布大小，并添加到viewBox中 当我设置viewBox值时，画布大小

我想将笔划路径转换为填充对象。（以编程方式，使用JavaScript。） 这条线只是一条简单的曲线，一系列坐标。我可以把这条线渲染成一条路径，给它一个一定厚度的笔划。。。但是我试图得到一个填充的形状，而不是一条笔划线，这样我就可以对它做进一步的修改，比如扭曲它，这样产生的“笔划”可能在厚度上有所不同，或者从中剪切出自定义位（据我所知，这两种情况都不可能与真正的SVG笔划一起） 所以我试图手动“加厚”一条线，使之成为一个实心形状。我找不到任何函数可以做到这一点——我已经查阅了和的文档，但没有找到运

我不确定这是否是最好的方法。我正在尝试制作一个SVG，它包含可缩放的部分和固定的部分。看起来是这样的： 当网页加载时，我不知道容器的高度，但我知道宽度。我希望连接线根据高度进行缩放，但保持长方体的加号居中，如下所示： 我已经尝试过x1、y1等的行设置，但我想不出一种不使用javascript的方法来实现它。SVG不是这里的最佳选择吗？以下是我目前掌握的情况： <svg class="s2"> <line x1="50%" y1="0" x2="50%" y2

我在浏览器代码中有一些JavaScript，可以在每个浏览器动画帧上读取、解析和写入SVG路径定义，从而在路径定义之间创建平滑的动画。它假设从SVGpath节点读取d属性时，数字将用空格或逗号分隔，如： m1.234.56 M1.23 4.56 m1.23,4.56 M1.23,4.56 有些地区使用逗号作为小数点设置数字格式，如1,23表示“一点二点三”。SVG路径d属性表示移动到x坐标1点2 3和y坐标4点5 6时，是否存在区域设置和浏览器的任何组合，可能会返回如下结果： m1,234

我正在尝试使用 startOffset和text-anchor属性，但居中不起作用 正文{ 背景：#20262E； 填充：20px； 字体系列：Helvetica； } $5,104.90 为了得到你需要的东西，我改变了路径的点。现在，路径从0,0开始。我还删除了所有的变换。如果您需要在不同的位置使用路径，您可以像我在代码中所做的那样，在工具提示中使用变换 请注意文本的属性dy=“35”。这是向上移动文本&在中间 正文{ 背景：#20262E； 填充：20px； 字体系列：Helvetic

我试图通过Sass将SVG设置为按钮的背景，但我得到了以下错误。我使用webpack创建web应用程序 错误： ERROR in ./src/components/Areas/ReportDisplay/button.svg 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. > <?xml version="1.0"

SVG的路径定义了几个命令（M，M，L，L，z，等等）。但是，我有时会看到缺少/空白命令，例如 m 0,0 20,0 0,20 -20,0 z 似乎没有命令是行命令，但我在任何地方都找不到这个文档。是这样吗？这在SVG规范的几个地方都有记录 如果在一行中多次使用同一命令，则可以在后续命令中消除命令字母（例如，您可以在“M 100 200 L 200 100 L-100-200”中删除第二个“L”，而改用“M 100 200 L 200 100-100-200”） 在M命令的解释下： 如果mo

正如以下GitHub问题中所指出的，当在ImageLayer中引用时，OpenLayers无法正确显示SVG图像： 几个月前，使用Layer类中的“render”属性实现了一个解决方案： 但我不知道如何正确地实现这一点。什么是帧状态，以及如何将其正确引用到render属性？OpenLayers后面的开发人员创建了一个示例来演示如何渲染SVG图像：

尝试将一些图标从svg转换为xbm，以便在OLED显示屏上使用NodeMCU显示它们 使用此命令：mogrify-path../src-format xbm*.svg 正如您在下面看到的，输出有点出乎意料。它还改变宽度和高度，因此从16x16 svg产生15x15 xbm 如何保持原始大小并消除这些瑕疵 Inkscape 0.92.4 ImageMagick 6.9.7-4 Q16 x86_64 20170114 基本操作系统5.0（Ubuntu 18.04.2 LTS） 使用Imagema

jsDom不支持SVG。因此，我试图通过引用链接-，来模拟SVG方法。在将getBBox方法添加到window.SVGElement.prototype时，它抛出错误，指出类型“SVGElement.ts（2339）上不存在属性“getBBox”。编辑器的quick fix将在文件lib.dom.d.ts中的SVGElement接口中添加getBBox方法，该方法仅可读 interface SVGElement extends Element, DocumentAndElementEventHa