Tag: svg

如何在D3.js中从起点到终点平滑地绘制path: 我有下面的代码，绘制一个基于正弦函数的线path： var data = d3.range(40).map(function(i) { return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4}; }); var margin = {top: 10, right: 10, bottom: 20, left: 40}, width = 960 – margin.left – margin.right, height = 500 – margin.top – margin.bottom; var x = d3.scale.linear() .domain([0, 1]) .range([0, width]); var y […]

如何样式SVG与外部CSS？: 我有几个SVGgraphics，我想通过我的外部样式表修改颜色 – 不是直接在每个SVG文件中。我不是把graphics放在线上，而是将它们存储在我的图像文件夹中并指向它们。我已经以这种方式实现了它们，以允许工具提示工作，并且我还将每个包装在<a>标记中以允许链接。 <a href='http://youtube.com/…' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a> 这里是SVGgraphics的代码： <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="stylesheets/main.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69"> <g> <path d="M28.44……./> </g> </svg> 我把以下内容放在我的外部CSS文件（main.css）中： .socIcon g {fill:red;} 但它对graphics没有影响。我也试过.socIcon gpath{}和.socIconpath{}。有些东西是不对的，也许我的实现不允许外部CSS修改，或者我错过了一个步骤？我真的很感谢你的帮助！我只需要通过我的外部样式表修改SVGgraphics的颜色，但我不能失去工具提示和链接能力。 […]

如何转换/保存d3.jsgraphics为pdf / jpeg: 我正在处理客户端/ JavaScript函数来将现有的D3-SVGgraphics保存或转换为文件。我search了很多，发现了一些build议，主要使用canvas.toDataURL() 。我在我的页面没有<canvas> ，而是使用： d3.select("body").append("svg")….我也尝试将SVG追加到<canvas>但没有任何反应。你能帮我解决这个例外： Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL' 谢谢

为什么在v2不执行的时候d3js v3在执行缩放时会破坏我的强制graphics？: 我有一个使用d3.js创build的强制布局我想同时具有可拖动力布局的正常function以及缩放能力。我基本上从这个（ http://jsfiddle.net/nrabinowitz/QMKm3/ ）代码复制/粘贴缩放代码。这与迈克·博斯托克（Mike Bostock）在这个例子中使用的缩放方法是一样的（ http://bl.ocks.org/mbostock/3680957 ）。这是我的代码： http : //jsfiddle.net/kM4Hs/6/ 正如我可以清楚地看到，缩放工作正常，但我无法在力布局中select单个节点，并拖动它们。我已经发现，其他作者都使用d3.v2.js而不是我正在使用的新版本的d3.v3.js。当我改变我的导入到V2，它完美的作品。但是，为了进步和普遍良好的代码性，我想尽可能使用v3。 <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> versus <script type='text/javascript' src='http://d3js.org/d3.v2.min.js'></script> 两个问题：为什么v3在v2没有时打破力布局，更重要的是，我能做些什么来解决这个问题？提前致谢！

在PDF中embeddedSVG（使用JS将SVG导出为PDF）: 起点：我没有一个服务器，可以提供任何东西，但静态文件。我在我的<body>中有一个SVG元素（dynamic创build），我想要导出为vector格式，最好是PDF或SVG。我开始考虑使用已经存在的lib jsPDF和downloadify 。它工作正常。不幸的是，这不支持SVG，只有文本。我已经阅读了关于PDF格式embeddedSVG图像的可能性，并且从Acrobat Reader 5（以及ImageViewer插件）开始似乎已经启用。但它不起作用。我已经尝试了3个不同的PDF阅读器没有成功。这是否意味着PDF已经降低了SVGembedded支持？我还没有发现任何东西。我有两个问题这可以解决？如果是的话，在PDF中embeddedSVG的规范是什么？有了这些信息，我就可以在jsPDF中build立自己的支持。浏览器支持需求是Safari，Chrome和Firefox。支持SVG的版本。

将SVGembedded到SVG中？: 我有一个SVG文件，我想在其中包含一个外部的SVG图像，例如： <object data="logo.svgz" width="100" height="100" x="200" y="400"/> （“对象”只是一个例子 – 外部文档将是SVG而不是xhtml）。有任何想法吗？这甚至有可能吗？或者，对我来说，最简单的方法是将logo.svg xml放入我的外部SVG文档中？

如何使一个<svg>元素展开或收缩到它的父容器？: 目标是将<svg>元素扩展为其父容器的大小，在这种情况下是一个<div>，不pipe容器有多大或多小。代码： <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> 这个问题最常见的解决scheme似乎是在<svg>元素上设置viewBox属性。 viewBox="0 0 widthOfContainer heightOfContainer" 但是，在<svg>元素中的元素具有预定义的宽度和/或高度的情况下，这似乎不起作用。例如，在上面的代码中，<rect>元素的宽度和高度都是明确设置的。所以显而易见的解决scheme是在这些元素上使用％宽度和％高度。但是，这甚至必须完成？尤其是，因为<img src = test.svg />可以正常工作，并且扩展/合同没有任何明确设置<rect>高度和宽度的问题。如果象<rect>这样的元素和其他像这样的元素必须以百分比来定义它们的宽度和高度，那么在Inkscape中是否有这样的方法来设置它，以便所有具有<svg>文档的元素使用百分比宽度，高度等..而不是固定的尺寸？

SVG与变换matrix协调: 我想在矩形元素上实现像svg-edit一样的function 旋转矩形调整拖动旋转SVG矩形它工作正常，但是当我想调整矩形的大小时，它有一个问题。坐标不正确; 我使用变换matrix来旋转targetelement.setAttribute(transform,rotate(45,cx,cy))但是当元素被旋转时，坐标被移动。我也使用inverse函数来逆转换matrix它解决了问题，但它不能与拖动function。

如何缩放一个固定的<object>标签embedded的SVG？: 我有一些SVG文件，指定width和height以及像这样的viewbox ： <svg width="576pt" height="432pt" viewBox="0 0 576 432" > … 但如何在浏览器中以我决定的大小显示它们？我希望他们更小，并尝试： <object width="400" data="image.svg"></object> 但是然后我得到可见的滚动条。如果我更改SVG文件，将width和height设置为100% ，但是我想要在HTML中决定大小，而不pipeSVG文件中使用了什么大小。这可能吗？