使用svg.js,如何从自定义事件访问元素?
myCircle.on('someEvent', function(event) {
var circleX = event.x(); // event.x is not a function
circleX = event.target.x() // event.x is not a function
circleX = event.target.x() // event.target.x is not a function
circleX = this.x() // this is
我正在使用svg.js创建包含文本和居中的圆圈,我能够做到这一点。
let draw = SVG('main');
// this is for the text
draw.plain(ele.ticket_id).attr({
x: posX,
y: posY,
fill: '#fff',
'alignment-baseline': 'central',
'text-anchor': '
我正在使用svg.js,现在我被困在一个场景中,我需要在SVG圈中添加一个很棒的字体图标。我可以通过vanilla js添加图标。但出于这个目的,我想特别使用svg.js。例如。我可以发现svg.js有text.plain() && text.text()方法,它几乎打印了我提供的Unicode (尽管这是预期的)。那么我应该如何在svg.js中创建图标呢?任何帮助我们都将不胜感激!实际上,我正在寻找以下代码片段的svg.js等效代码。 let text = document.createElementNS(SVGNamespace, 'text');
t
我使用库SVG.js和svg.select.js来操作svg对象,在选择文本元素时遇到了问题,正如您在这个中所看到的那样。使用椭圆没有问题,这是在尝试选择文本时出现的错误消息:"Uncaught : this.parent.group不是一个函数“--这是我的代码:
var draw = SVG('drawing')
var selectedelement;
var g = draw.group();
text = g.text('Perepepeeeee');
var myEllipse = g.ellipse(50, 50);
myEllipse.m
我开始使用snap.svg,并陷入了一个可能很简单的问题。我画了一个圆,想让用户拖动它,当用户停止拖动时,我想知道圆的最终位置的警报。
我是这样开始的:
var s = Snap("#svg");
var d = s.circle(20,20,5);
然后,我创建了以下函数作为拖动事件处理程序;我只需要拖动结束事件,所以我将另外两个事件处理程序设为空:
var endFnc = function(e) {
alert("end: "+e.layerX+","+e.layerY);
}
var startFnc = null;
va
如何使SVG.js路径动画在移动和调整大小时遵循直线?
有两个部分的动画。首先,对SVG路径中的文本进行放大并移动到矩形的中心。之后,它需要缩小到原始大小,并移动到矩形的另一角。
第一部分根据需要进行动画,但第二部分文本移出查看区域,然后返回。
let draw = SVG('reading-area');
var group = draw.group();
original = group.svg(getSvgText());
original.animate(1000, '-', 0).move(229, 164).scale(3);
original.a
我在我的项目中使用SVG.js库,并且我试图向x方向移动一个包含一些rect、text和一个use元素的组:
// create symbol, symbol can be anything
const symbol = svg.symbol().circle(10)
//create group with elements
const group = svg.group();
const rect = group.rect();
const text = group.plain('some text');
const symbolUse = svg.use(symbol
我很难导入svg.js和它的在一个角形5项目中使用类型记录。
在国家预防机制I安装后:
svg.js
在ticket.component.ts:导入Svg类型的svg.js中,这样我就可以绘制一个矩形,这段代码可以工作:
import * as Svg from 'svg.js'
...
export class TicketComponent implements OnInit {
ngOnInit() {
let draw = Svg('ticket-svg').size(1000, 500);
let rect =
Svg.js旋转动画,因为它默认使用元素的中心点,即使当元素从一个点移动到另一个点时也是如此,但现在当我向图像添加剪切路径时,我是,因为中心点仍然是原始图像的中心,即使它在剪切路径之外。我想用剪裁路径的中心点来代替。我能找到的最接近的东西是。
var rect = draw.rect(60,60)
var picture = draw.image(img.jpg).clipWith(rect)
picture.animate(1000).rotate(360)
如何让它在svg.js中工作?
我想用svg.js动画一个物体的弯曲运动(没有旋转)。但我找不到任何简单的办法解决这个问题。我写了两个很好的小函数,但是它的工作方式不像普通的动画,而且在后台运行也不完美。
我更喜欢这样的解决方案:
var draw = SVG("drawing").size(500,500);
var rect = draw.rect(50,50);
rect.animate().curvedmove(100,100);
我所做的两项职能:
function animateJump(object,start,end,ampl,y,i=0){
var speed = 25;
v
我有一个SVG.js动画时间表,并希望一些文本出现在5秒内。我想也许我能做到:
var popup = draw.text('Here is my text').attr({x:250, y:225 }).hide();
popup.animate(0, 5000).show();
hide()可以工作,但show()不是动画方法。
描述:尝试将元素添加到Node.appendChild组会导致"TypeError: javascript的参数1不是对象“。尽管我已经使用typeof验证了它是一个对象。 let d = SVG('board').size(100, 100);
function createElem(elemId) {
let elem;
elem = d.rect().attr({
id: elemId
});
return elem;
};
function main() {
'use strict';
let elem,