svg.js

Make HTML Canvas generate PDF-ready Line art?

由 眉间皱痕 提交于 2021-01-28 21:26:31
问题 I have an HTML/JavaScript program that uses the HTML5 canvas to generate a pretty graph: I want to include this graph in a book that I'm producing with LaTeX. Unfortunately, when I print this page to PDF, I get a bitmap—presumably because canvas is a bitmap. I just checked and apparently if I had developed this with SVG instead of with HTML5 canvas I would be good to go. But I didn't. So is there any way to generate line art from HTML5 Canvas, or should I just bite the bullet and re-implement

Rotating Nested SVG

由 删除回忆录丶 提交于 2021-01-28 06:20:18
问题 I am using SVG.js and trying to make some manipulations with SVG. I was previously working with canvas but I was very disappointed with the quality of the images it was generating so I've decided to use pure SVG. I managed to change everything into a pure SVG approach, everything except one thing: rotation. I cannot make it work. I would love to use what the SVG.js library offers, but that didn't work. I also have tried fiddling with the elements inside but also without success. The best link

SVG.js动画系列4-滤镜动画

由 倾然丶 夕夏残阳落幕 提交于 2020-11-10 07:51:39
给滤镜加上动画，是一个什么样的效果呢。效果图如下： 本示例是anime.js的滤镜动画的翻版，用SVG.js实现。代码： var draw = SVG().addTo('body').size(800, 600) const points1 = "64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"; const points2 = "64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96"; var polygon, filter, turbulence, displacementMap; function make() { const color = SVG.Color.random(); polygon = draw.polygon(points1).attr({fill:color}); filter = polygon.filterWith(function(add){ turbulence = add.turbulence({ baseFrequency:".05", numOctaves:"2" }); const scale = "15"; const xChannelSelector = "R"; const yChannelSelector =

8款超好用的SVG编辑工具用起来

由 对着背影说爱祢 提交于 2020-04-24 16:13:00
随着响应式网页的发展，对于内容呈现的要求也越来越高，尤其是图像。为了在各种设备上能实现自然伸缩或扩展而不影响图片质量，所以矢量图形（SVG）正变得越来越受欢迎。 大家都知道，在计算机图形学中，有两种主要的图像类型：矢量和位图。位图[bitmap]，也叫做点阵图，栅格图象，像素图，简单地说，就是最小单位由像素构成的图，缩放会失真。矢量图，简单地说，就是缩放不失真的图像格式。 为什么SVG更受欢迎？主要有这几方面的原因： SVG 是可伸缩的矢量图形，在浏览器中改变尺寸，其图形质量不会有所损失 相比其它位图，SVG图像文件更小，可压缩性更强 SVG 可以被记事本等阅读器、搜索引擎访问 SVG 图像中的文本是可选的，同时也是可复制的 SVG 图像可以与DOM，CSS和JavaScript交互 SVG 可以制作成整体或局部动画 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像。 但当进行 Web 设计时，我们还需要做一些优化来使得 SVG 变得更加轻量。要创建和使用SVG文件，你需要一个矢量图形编辑器。以下是 摹客 团队为大家整理的适用于Windows，Mac，Linux，Web，iOS和Android的免费或付费的SVG编辑器。 1. Adobe Illustrator 支持：Windows/Mac Adobe

Calculate coordinates for 45 degree snap

由 假装没事ソ 提交于 2020-02-07 16:33:42
问题 I have a SVG that draws a line between an origin point and the mouse pointer, what i'd like to do is when shift is depressed (event.shiftKey === true) make the line "snap" to the nearest 45 degree coordinate, the same behaviour you get in photoshop basically. I've managed to work out the angle in degrees between the two points (so i can decide which angle to snap too, probably using an IF/ELSE tree if needs be) however I don't know how i re-calculate the "end" coordinates based on the new

Calculate coordinates for 45 degree snap

由 放肆的年华 提交于 2020-02-07 16:33:32
问题 I have a SVG that draws a line between an origin point and the mouse pointer, what i'd like to do is when shift is depressed (event.shiftKey === true) make the line "snap" to the nearest 45 degree coordinate, the same behaviour you get in photoshop basically. I've managed to work out the angle in degrees between the two points (so i can decide which angle to snap too, probably using an IF/ELSE tree if needs be) however I don't know how i re-calculate the "end" coordinates based on the new

Calculate coordinates for 45 degree snap

由 隐身守侯 提交于 2020-02-07 16:32:23
问题 I have a SVG that draws a line between an origin point and the mouse pointer, what i'd like to do is when shift is depressed (event.shiftKey === true) make the line "snap" to the nearest 45 degree coordinate, the same behaviour you get in photoshop basically. I've managed to work out the angle in degrees between the two points (so i can decide which angle to snap too, probably using an IF/ELSE tree if needs be) however I don't know how i re-calculate the "end" coordinates based on the new

Using SVG.select() method with class selector of the svg.js library doesn't work with typescript

由 北战南征 提交于 2019-12-24 21:13:55
问题 I'm testing svg.js library with typescript and having some problems with usage of CSS selectors. I would like to select SVG element using select() method with class selector. In the presented fiddle it works perfectly with javascript: var circleTwo = SVG.select('circle.circle-01'); Unfortunately, it doesn't work with typescript. Lib is imported like that: import * as SVG from 'svg.js; When hover on select() method, getting the info about second parameter: However according to the

svg.js + Angular 7.3: Build in production mode get 'not a constructor'

由 六月ゝ 毕业季﹏ 提交于 2019-12-24 16:05:05
问题 In development mode this code works perfectly: app.component.ts import { Component, OnInit } from '@angular/core'; import SVG from "@svgdotjs/svg.js/src/svg" //v 3.0.12 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'svgjs30'; draw: any ngOnInit() { this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140) var text = this.draw.text('ABCDE') } } but in production mode (after ng

SVG.js, remove/read attribute “transform” from elements imported with “use”

由 霸气de小男生 提交于 2019-12-24 08:06:39
问题 I am using SVG.js to render a chessboard. The idea is, to keep the pieces in an external svg-file sprite.svg and include them with use, like this: var pieceDrawn = svg.use(piece, "sprite.svg").move(x, y); piece may be wp white pawn, in the sprite.svg : <!-- white pawn //--> <g id="wp" transform="translate(225,0)"> <path d="M 22,9 C 19.79,9 18,[...]"/> </g> sprite.svg was created in Sketch, therefore the group has an attribute transform . So when I move(x,y) the element, the transformation
订阅 svg.js