Articles of svg

SVG标签占用额外的空间

所以我得到了一个奇怪的大小与HTML5中的SVG元素的问题。 这比我怀疑的要占用更多的空间。 图像中的每个小矩形都是一个宽度和高度均为“20”的矩形元素。 SVG元素的高度和宽度应为20 * 10 = 200,而尺寸为680×508。 你可以在这里查看检查过的svg元素 – > http://img.nodejscore.com/html5/xrofn.png HTML看起来像这样: <svg> <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> … </svg> 应该指出,我正在运行node.js和mustache.js。 编辑:显然SVG做一些事情时,不确定的宽度/高度。 手动设置解决了这个问题。 <svg height="200" width="200">

svg图像点播

我有JavaScript代码,当一个人登陆其中一个页面时,dynamic生成svg图像标签。 我使用d3库来帮助制作图像。 唯一的问题是,D3是不完全IE浏览器兼容,我想生成一个.png,JPG,GIF或任何其他图像文件基于SVG文件。 有没有一种已知的方法来做到这一点? 服务器端代码是基于PHP的,我们使用node.js和render.js来处理大量的dynamic内容。

在Azure中为SVG和字体显示NodeJS web.config

我在快速网站中遇到了问题,该网站使用SVG和其他文件,如字体。 在本地运行应用程序时没有任何问题,但是一旦在Azure上部署,SVG和字体就不会再出现。 在项目根目录下创build一个web.config文件: <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> <mimeMap fileExtension=".ttf" mimeType="application/x-woff" /> </staticContent> </system.webServer> </configuration> 也使用这个解决scheme:( Windows Azure中的Svgs和其他MIMEtypes ) 这两个解决scheme现在允许加载SVG文件,但网页不再加载。 (HTTP 500) 它似乎覆盖dynamic内容的configuration。 如何configurationdynamic内容,使应用程序再次工作?

D3JS:如何将SVG文本转换为path?

有没有一种D3.js的方式来将文本元素转换为path元素? 所以当我抓住生成的SVG,我可以保留我的文字形状。

Snap.svg可以用在Node.js的服务器端吗? (不通过浏览器)

我需要使用一些服务器端代码(如使用cron作业)来创build和操作某些SVG,但是我想知道是否可以在这种情况下使用Snap.svg,而不包含在网页中。 这是否会在没有Snap.svg的情况下在浏览器中运行?

计算字体字形的确切大小

我需要一种方法来查找相对于其边界框的字形的确切大小和位置。 我们使用D3.js创build一个标题,一个较小的字体和一个短的正文文本的SVG。 非常多这个: Lorem ipsum Lorem ipsum dolor Lorem ipsum dolor坐amet, consectetur adipisicing elit, sed做eiusmod tempor incididunt ut labore et dolore magna aliqua 正如在这个例子中,我需要文字左alignment,无论字体大小。 问题是它是alignment的每个行边界框,而不是字形。 这使标题看起来缩进。 如何计算边界框和字形之间的空间,以便我可以正确地alignment文本? 一位同事坐下来,手动测量了英文字体,效果很好。 我们可以在Adobe Illustrator中做到这一点,但我们需要英文,中文和阿拉伯文字体的信息。 手工操作或多或less是不可能的。 我可以想出的唯一解决scheme是在canvas元素中键入每个字符,并映射每个像素以查看字形开始和结束的位置。 我认为最理想的是使用SVG字体path信息来find极值,这样我们就可以得到确切的数字而不是估计值。 我们的估计有一个很大的误差。 有没有办法做到这一点node.js? SVG的一个例子是: <svg viewBox="0,0,1008,1424" height="1052px" width="744px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,150)" class="container"> <g transform="translate(0,205)" class="textContainer"> <g fill="white" font-family="serif" font-size="" class="header"> <text> […]

debuggingdomjs和highcharts

好的,所以我试图将一个相当复杂的highcharts渲染脚本从前端移动到通过nodejs进行的服务器端处理 它实际上相当不错。 我有“没有错误”和图表是渲染与数据到SVG。 问题是,当我去查看浏览器中的输出svg的全部搞砸了。 在萤火虫我得到以下“警告”: Unexpected value NaN parsing y attribute. Unexpected value NaN parsing x attribute. Unexpected value NaN parsing y attribute. Unexpected value NaN parsing x attribute. 我的问题是,我怎么去debugging呢? 我不知道哪里的NaN值是在highcharts源代码中计算的,并且在控制台中没有得到传统的js错误。 基本上相同的代码目前在实际的浏览器环境中工作正常,但是在使用nodejs和domjs处理时失败,所以它的可能问题与此有关。 这是我的节点脚本: # base libs {jsdom} = require 'jsdom' jade = require 'jade' fs = require 'fs' # chart and settings Chart = require […]

将SVG代码转换为node.js中的PNG数据URI

我想将简单的dynamicsvg片段转换为服务器上的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/png;base64,'+toPng(svg, 100, 100)+'">') 我看过使用imagemagick和一些phantomJS变体的例子,但是我正在寻找node.js中的dynamic解决scheme,最好没有I / O。

SVG到canvas与d3.js

有没有人在创buildd3.js可视化文件时尝试使用svgcanvas库? 我已经尝试使用canvg.js和d3.js从android 2.3应用程序webview中将svg转换为canvas,但是当我调用: svg.selectAll(".axis") .data(d3.range(angle.domain()[1])) .enter().append("g") .attr("class", "axis") .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; }) .call(d3.svg.axis() .scale(radius.copy().range([-5, -outerRadius])) .ticks(5) .orient("left")) .append("text") .attr("y", function (d) { if (window.innerWidth < 455){ console.log("innerWidth less than 455: ",window.innerWidth); return -(window.innerHeight * .33); } else{ console.log("innerWidth greater than 455: ",window.innerWidth); return -(window.innerHeight * […]

D3js:如何生成独立的SVG文件? (的NodeJS)

给定一个D3js代码 , 如 : function () { var svg = window.d3.select("body") .append("svg") .attr("width", 100) .attr("height", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80) .attr("height", 80) .style("fill", "orange"); } 如何使用我的D3js代码和NodeJS生成正确的独立* .svg文件?