svg.js | 易学教程

How can i use timelines in version svg.js 3.x

阅读更多关于 How can i use timelines in version svg.js 3.x

问题 There seems to be a new timeline-feature in svg.js Version 3.x. I'd like to try this feature but I don't understand the api. As far as I see, the documentation has not been updated yet. Could you please give me an example that shows me how to get started with timelines? Thanks Michael 回答1: A new timeline is created for every element automatically when you animate it or request it: const animationRunner = el.animate(duration).move(100, 100) // cretates a timeline const timeline = el.timeline()

SVG shapes with fill, stroke and strokewidth

阅读更多关于 SVG shapes with fill, stroke and strokewidth

问题 I have a polygon shape with border, stroke-width and fill colors. I am looking for multiple polygon shapes; below is one of them with 4 edges. Out of which 3 edges just have stroke and the other edge has fill color. From above figure we have one side of the polygon with fill and stroke, others just stroke with strokeWidth 1. I am quite new to SVG. What can be the best way to draw this shape? Paths, lines, polygons, or combination of this? Will fill-rules be helpful here? Suggestions please.

Invert mask with svg.js

阅读更多关于 Invert mask with svg.js

问题 I'm starting to use svg.js on a project, and as I was playing with masks, I couldn't manage to invert them. I drew a rectangle, and a circle, using the circle as a mask for the rectangle, only showing the part of the rectangle that's inside the mask. var leftRect = draw.rect(300, 200); var maskTest = draw.circle(100); leftRect.attr({ x: 100, y: 100, fill: '#FF64F9' }); maskTest.transform({ x: 150, y: 150 }); leftRect.clipWith(maskTest); Now I want the opposite, I want to mask to display

Find center of svg shape

阅读更多关于 Find center of svg shape

问题 Im using svgjs to create my shapes. How can I find the center point of an svg shape and add an element there? In my case a red dot. I can't find any information in the documentation for a method or something that helps in this situation. 回答1: You can use the method getBBox or alternatively getBoundingClientRect. Both methods give you an object with the properties x, y, width, height , which you can use to calculate your center. Since you tagged your question with svg.js I will also give you a

Mask rotated SVG element

阅读更多关于 Mask rotated SVG element

问题 I am using svg.js to draw my SVG. I was wondering, whether it's possible to mask rotated element. I could achieve rotating masked element, which isn't the same. See a minimal working example - http://jsfiddle.net/mreq/LP7sa/1/ - I'd like the rotated image to be masked with the red rectangle. The example produces following code: <svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1000" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative

Mask rotated SVG element

阅读更多关于 Mask rotated SVG element

I am using svg.js to draw my SVG. I was wondering, whether it's possible to mask rotated element. I could achieve rotating masked element, which isn't the same. See a minimal working example - http://jsfiddle.net/mreq/LP7sa/1/ - I'd like the rotated image to be masked with the red rectangle. The example produces following code: <svg xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1000" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0px;"> <rect id="SvgjsRect1003" width="50%" height="50%" y="75" x="125" fill=

Create svg arcs between two points

阅读更多关于 Create svg arcs between two points

问题 I want to connect two SVG points (e.g. the centers of two circles) using arcs. If there is only one connection, the line ( <path> ) will be straight. If there are two connections, both will be rounded and will be symmetrical, this way: So, in fact, there are few rules: Everything should be symmetrical to to the imaginary line that connects the two points. From 1, it's obvious that if the number of connections is: odd: we do not display the straight line even: we display the straight line

nested svg ignores transformation in Chrome and Opera [duplicate]

阅读更多关于 nested svg ignores transformation in Chrome and Opera [duplicate]

问题 This question already has answers here : SVG translate seems to behave different in Chrome/Chromium (2 answers) Closed 4 years ago . I experienced somewhat that I would call a bug. I have the following 2 svg: <svg height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1004"> <defs id="SvgjsDefs1005"></defs> <g transform="matrix(2,0,0,2,50,50)" id="SvgjsG1011"> <rect height="50" width="50" id="SvgjsRect1012"></rect> <

nested svg ignores transformation in Chrome and Opera [duplicate]

阅读更多关于 nested svg ignores transformation in Chrome and Opera [duplicate]

This question already has an answer here: SVG translate seems to behave different in Chrome/Chromium 2 answers I experienced somewhat that I would call a bug. I have the following 2 svg: <svg height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" id="SvgjsSvg1004"> <defs id="SvgjsDefs1005"></defs> <g transform="matrix(2,0,0,2,50,50)" id="SvgjsG1011"> <rect height="50" width="50" id="SvgjsRect1012"></rect> </g> </svg> <svg height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org