How to use snapsvg - 10 common examples
To help you get started, we’ve selected a few snapsvg examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
CodeForPhilly / philly-ward-leaders / src / components / baseball-card / svg.js View on Github 
export function createBack (el, contentsEl, data) {
const isRepublican = (data.party === 'republican')
const config = {
cardWidth: 250,
cardHeight: 375,
cardBorderWidth: 15,
cardBorderColor: isRepublican ? '#a12222' : '#2284a1',
cardInsideColor: '#CDD8DB'
}
const svg = Snap(el)
svg.attr({
viewBox: [0, 0, config.cardWidth, config.cardHeight]
})
// Card
svg.rect(5, 5, config.cardWidth - 10, config.cardHeight - 10, 2)
.attr({
fill: config.cardBorderColor,
stroke: config.cardBorderColor,
strokeWidth: 10
})
// Inside
const insideX = config.cardBorderWidth
const insideY = config.cardBorderWidth
const insideWidth = config.cardWidth - config.cardBorderWidth * 2draw () {
const self = this
const opt = self.option
if (!opt.el) throw new Error('el is undefined in Wheel')
if (!opt.data) throw new Error('data is undefined in Wheel')
const center = opt.pos.map(p => p + opt.radius)
opt.center = center
const svg = Snap(opt.el)
svg.node.style.width = String(opt.radius * 2) + 'px'
svg.node.style.height = String(opt.radius * 2) + 'px'
self[deg] = 360 / opt.data.length
// image resource provided?
if (opt.image) self[drawResource](svg)
else self[drawDefault](svg)
self[animeFunc]()
}render() {
let svg = Snap(this.container.querySelector('svg'));
return this.parsed.render(svg.group())
// Once rendering is complete, the rendered expression is positioned and
// the SVG resized to create some padding around the image contents.
.then(result => {
let box = result.getBBox();
result.transform(Snap.matrix()
.translate(10 - box.x, 10 - box.y));
svg.attr({
width: box.width + 20,
height: box.height + 20
});
})
// Stop and remove loading indicator after render is totally complete.
.then(() => {export function createFront (el, data) {
const isRepublican = (data.party === 'republican')
const config = {
cardWidth: 300,
cardHeight: 450,
cardBorderWidth: 15,
cardBorderColor: isRepublican ? '#a12222' : '#2284a1',
topLeftCut: 65,
bottomRightCut: 95
}
const svg = Snap(el)
svg.attr({
viewBox: [0, 0, config.cardWidth, config.cardHeight]
})
// Card
svg.rect(5, 5, config.cardWidth - 10, config.cardHeight - 10, 2)
.attr({
fill: config.cardBorderColor,
stroke: config.cardBorderColor,
strokeWidth: 10
})
const photoX = 0
const photoY = config.cardBorderWidth
const photoWidth = config.cardWidth - config.cardBorderWidth // + data.photoOffset
const photoHeight = config.cardHeight - config.cardBorderWidth.then(result => {
let box = result.getBBox();
result.transform(Snap.matrix()
.translate(10 - box.x, 10 - box.y));
svg.attr({
width: box.width + 20,
height: box.height + 20
});
})
// Stop and remove loading indicator after render is totally complete.Persona.prototype.merge = function(target) {
/* unregister all events */
this.invalidate();
/* unhighlight the target */
target.unhiglightForMerge();
/* animate the merge */
var matrix = Snap.matrix();
matrix.e = target.position.x;
matrix.f = target.position.y;
matrix.scale(0);
this.animate({transform: matrix}, this.mAnimationDurationBase * 2, mina.easein, function() {
/* since a persona handles its own container, remove it from the DOM */
this.remove();
/* if the parent of this persona is set and it has an objects array, remove this persona from it */
var parent = this.parentNode;
if (parent && parent.removeObject) {
parent.removeObject(this);
}
/* remove this graphical persona from the data */
this.mData.graphicalPersona = null;
/* trigger the merged event */
this.mEventCenter.publish(Events.merged, this, target);
}.bind(this));play(){
let start = this.state.position;
if (start >= this.state.length){
start = 0; // at the end and pressed play so restart
}
let remainingLength = this.state.length - start;
let remainingTime = this.props.time * remainingLength / this.state.length;
this._segmentToPath();
this.setState({mode: 'playing'});
this.path.attr({'stroke-dasharray': this.state.length + ' ' + this.state.length});
this.path.attr({display: 'block'});
this.snapAnimate = Snap.animate(remainingLength, 0,
(val) => { // incremental callback
let newPos = this.state.length - val;
this.path.attr({'stroke-dashoffset': val});
if (this.marker) {
this._positionMarker(this.path,
newPos,
this.state.length);
}
this.setState({position: newPos,
step: this._segmentFromPosition(newPos)});
},
remainingTime,
mina.linear,
() => { // end callback
this.setState({mode: 'path',
position: 0});var separatorWidth = this.mOptions.config.gaugeSeparatorWidth;
if (animated) {
/* compute the color difference */
var colorDifference = {
r: newColor.r - currentColor.r,
g: newColor.g - currentColor.g,
b: newColor.b - currentColor.b,
a: newColor.a - currentColor.a,
};
/* save the current value and compute the value change */
var currentValue = barInfo.currentValue;
var valueChange = (progress + progressOffset) - currentValue;
barInfo.animation = Snap.animate(0, 1,
function (delta) {
var animatedColor = 'rgba(' +
(currentColor.r + (colorDifference.r * delta)) + ',' +
(currentColor.g + (colorDifference.g * delta)) + ',' +
(currentColor.b + (colorDifference.b * delta)) + ',' +
(currentColor.a + (colorDifference.a * delta)) + ')';
var value = currentValue + (valueChange * delta);
barInfo.currentValue = value;
bar.attr({'stroke-dasharray': this.mCircumference * value + ' ' + this.mCircumference * (1.0 - value), 'stroke': animatedColor});
if (separator) {
value += value > 0 ? separatorWidth : 0;
separator.attr({'stroke-dasharray': (this.mCircumference * value) + ' ' + this.mCircumference * (1.0 - value)});
}
}.bind(this),
this.mOptions.config.transitionsDuration, mina.linear, function () {
barInfo.animation = null;_positionMarker(path, location, end){
if (this.marker) {
let point = Snap.path.getPointAtLength(path, location);
let now = point;
if (end && end - location < 1) {
// Snap.svg at very end of path returns rotation as 90 degrees
while (point.alpha === 90) {
location -= 1;
point = Snap.path.getPointAtLength(path, location);
}
}
this.marker.transform('translate(' + now.x + ',' + now.y + ') rotate('+ (point.alpha - 90)+')');
}
}let textSum = 0 // a-z0-9 为 1，其他为 2
for (let i = 0; i < d.text.length; ++i) {
if (d.text[i].match(/\w/)) {
textSum += 1
} else textSum += 2
}
if (!opt.fontSize && !d.fontSize) {
fontSize = fontSize * textSum / 2 > dLen * opt.textBottomPercentage ? dLen * opt.textBottomPercentage / textSum * 2 : fontSize
}
const text = svg.text(opt.center[0], opt.pos[1] + opt.radius - (r * opt.textBottomPercentage * Snap.cos(self[deg] / 2)) - fontSize, d.text)
text.attr({
fill: d.fontColor ? d.fontColor : opt.color.prizeFont,
fontSize: opt.fontSize ? opt.fontSize : fontSize
})
const box = text.node.getBoundingClientRect()
text.transform(new Snap.Matrix().translate(-Math.round(box.width / 2), 2))
const g = svg.g(pie, text).transform(new Snap.Matrix().rotate(self[deg] * Number(i), opt.center[0], opt.center[1]))
self[turntable].add(g)
}
}
