Develop Reference

Javascript SVG clipto with clip rule (fabricjs)

There is the exemple in img
http://imgur.com/rFdcctc
I have a background where i put an image (phone case).
After that i put a rectangle on the top side (50% top). (canvas)
On that i put an svg that is an another mask (that follow the case curves).
The svg is the same as the entire background in size. So to only have the top of the SVG i "clip" a rectangle on to it.
var clipTo = function(ctx) {
var w = mask.width, h = mask.height;
var x = -w/2, y = -h/2;
var rx = 0, ry = 0;
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.lineTo(x+w, y+(h/2)-ry);
ctx.lineTo(x+rx,y+(h/2));
ctx.lineTo(x,y+ry);
ctx.closePath();
};
mask.setClipTo(clipTo);
And it works fine. But when i put a dragable image on it the image is mask by the SVG but not the clip rectangle, as if the clip is still there. (in the image, the content of the red rectangle should be invisible)
I have found that there is a clip-rule :
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-rule
that could maybe with luck enventually should do it, but i have no idea how to apply it in javascript (i use fabricjs)
So if someone has an idea... :)
Thank you

Window resize jquery on SVG

Svg looks like:
<svg width=xxx height=xxx>
<g width=xxx height=xxx>
</g>
</svg>
My original resize script:
var desiredWidth1=$('svg').attr("width");
var scaleVal1=$(window).width()/desiredWidth1;
var desiredWidth2=$('svg').attr("height");
var scaleVal2=$(window).height()/desiredWidth2;
var originalTrans = $('svg').attr('transform');
if(scaleVal1>scaleVal2){
$('svg').css("-webkit-transform","scale("+scaleVal2+")");
$('svg').attr("transform", 'translate('+80*scaleVal2+',0)');
}
else{
$('svg').css("-webkit-transform","scale("+scaleVal1+")");
$('svg').attr("transform", 'translate('+80*scaleVal1+',0)');
}
It only resizes the svg once the page loaded, and it is not dynamically resizing.
Therefore my new jquery on window resize here:
$(window).on("resize","g",function(){
var desiredWidth1=$("svg").attr("width");
var scaleVal1=$(window).width()/desiredWidth1;
var desiredWidth2=$("svg").attr("height");
var scaleVal2=$(window).height()/desiredWidth2;
if(scaleVal1>scaleVal2){
$("g").css("-webkit-transform","scale("+scaleVal2+")");
$("g").attr("transform", 'translate('+80*scaleVal2+',0)');
}
else{
$("g").css("-webkit-transform","scale("+scaleVal1+")");
$("g").attr("transform", 'translate('+80*scaleVal1+',0)');
}
});
This is my resize jquery. I want to resize the element 'g' based on client window size.
However this jquery is not working properly. There is no warning or error in console, and it seems to be some problems in DOM and cannot change the element g.
Any information on my code or better scenarios would be helpful. Thanks.

If you set the viewBox, width and height attributes of the <svg> to the right values, the browser will scale everything for you.
var svg = $("#mysvg").get(0);
var w = svg.width.baseVal.value;
var h = svg.height.baseVal.value;
svg.setAttribute('viewBox', '0 0 '+w+' '+h);
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
Demo here
If you need the width and height to be something specific (rather than "100%"), just modify those last two lines. No need to go in and modify the <g> element.
PS. Note that you can't trust jQuery to modify the attributes of the SVG correctly. It is designed for HTML, not SVG and doesn't always do the right thing. It is usually better to use vanilla Javascript as I have done here.

window.onload = function(){//First open resize
var desiredWidth1=$('svg').attr("width");
var scaleVal1=$(window).width()/desiredWidth1;
var desiredWidth2=$('svg').attr("height");
var scaleVal2=$(window).height()/desiredWidth2;
var originalTrans = $('svg').attr('transform');
$('svg').css("transform-origin","left");
if(scaleVal1>scaleVal2){
$('svg').css("-webkit-transform","scale("+scaleVal2+")");
$('svg').css("-ms-transform","scale("+scaleVal1+")");
$('svg').attr("transform", 'translate('+80*scaleVal2+',0)');
}
else{
$('svg').css("-webkit-transform","scale("+scaleVal1+")");
$('svg').css("-ms-transform","scale("+scaleVal1+")");
$('svg').attr("transform", 'translate('+80*scaleVal1+',0)');
}
}
window.onresize = function() {//Dynamically resize the svg to fit the window
var desiredWidth1=$("svg").attr("width");
var scaleVal1=$(window).width()/desiredWidth1;
var desiredWidth2=$("svg").attr("height");
var scaleVal2=$(window).height()/desiredWidth2;
if(scaleVal1>scaleVal2){
$("svg").css("-webkit-transform","scale("+scaleVal2+")")
$("svg").css("-ms-transform","scale("+scaleVal2+")")
$("svg").attr("transform", 'translate('+80*scaleVal2+',0)');
}
else{
$("svg").css("-webkit-transform","scale("+scaleVal1+")");
$("svg").css("-ms-transform","scale("+scaleVal1+")");
$("svg").attr("transform", 'translate('+80*scaleVal1+',0)');
}
}
Finally work this out based on my original codes. As BigBadaboom mentioned and thank you very much, jQuery is usually not working for elements inside the SVG, such as g, path, node etc. However, it just works fine for the whole SVG element.

How to draw a line to the edge of the screen(browser) in Rapheal js?

I would like to draw(animate a line) in Raphael to the edge of the screen/browser from e.g. the x=100, y=100 pixels to the very right edge of the screen.
I know how to do the animation part, I just need to know how can I dynamically find out the rightest coordinates.
How to do such thing without creating a horizontal scroller in browser?
Is this possible in Raphael js or not at all?
My code so far:
var paper = Raphael(100, 100, ???, 1);
var lineToEdge = paper.path("M0 0");
lineToEdge.attr(fillerLine);
var anim = Raphael.animation({path: "M0 0L??? 100"}, 500);
lineToEdge.animate(anim.delay(2500));
??? - variables that will somehow give me the rightest x position.

Use Javascript's window.screen object to get this info.
See: http://www.javascriptkit.com/howto/newtech3.shtml
So your code would look like (sorry, haven't tested this myself):
var paper = Raphael(100, 100, screen.width, 1);
var lineToEdge = paper.path("M0 0");
lineToEdge.attr(fillerLine);
var anim = Raphael.animation({path: "M0 0L"+screen.width+" 100"}, 500);
lineToEdge.animate(anim.delay(2500));

How would you create a JQuery / svg click-drag select outline effect?

Not sure exactly what to call it, but I am looking for a way to create a dotted outline/selection box effect via javascript/svg when you click and drag over an area, and then goes away on mouseUp (that could be added if it wasn't an original part) .
A jQuery library would be nice if it exists. I've done some looking around, and haven't found exactly what I am looking for.
I guess the theory would be get the coord from the first click, track the mouse coord moment and adjust the box accordingly.
But not writing it from scratch would be nice.

Here's a demo I made just for you :)
Demo (Static): http://jsfiddle.net/HNH2f/1/
Demo (Animated): http://jsfiddle.net/HNH2f/2/
You can use CSS to control the visual style of the marquee.
You can pass one or two functions to the trackMarquee method; both will be called with four arguments: the x1,y1,x2,y2 bounds of the marquee. The first function will be called when the marquee is released. The second function (if present) will be called each time the marquee moves (so that you can, for example, calculate what items are within that bounding box).
When you start dragging on the SVG document (or whatever element you choose to track) it will create a <rect class="marquee" />; during dragging it will adjust the size of the rectangle. Use CSS (as seen in the demo) to style this rectangle however you want. I'm using the stroke-dasharray property to make the border dotted.
For Stack Overflow posterity, here's the code (on the off chance that JSFiddle is down):
(function createMarquee(global){
var svgNS = 'http://www.w3.org/2000/svg',
svg = document.createElementNS(svgNS,'svg'),
pt = svg.createSVGPoint();
// Usage: trackMarquee( mySVG, function(x1,y1,x2,y2){}, function(x1,y1,x2,y2){} );
// The first function (if present) will be called when the marquee is released
// The second function (if present) will be called as the marquee is changed
// Use the CSS selector `rect.marquee` to select the marquee for visual styling
global.trackMarquee = function(forElement,onRelease,onDrag){
forElement.addEventListener('mousedown',function(evt){
var point0 = getLocalCoordinatesFromMouseEvent(forElement,evt);
var marquee = document.createElementNS(svgNS,'rect');
marquee.setAttribute('class','marquee');
updateMarquee(marquee,point0,point0);
forElement.appendChild(marquee);
document.documentElement.addEventListener('mousemove',trackMouseMove,false);
document.documentElement.addEventListener('mouseup',stopTrackingMove,false);
function trackMouseMove(evt){
var point1 = getLocalCoordinatesFromMouseEvent(forElement,evt);
updateMarquee(marquee,point0,point1);
if (onDrag) callWithBBox(onDrag,marquee);
}
function stopTrackingMove(){
document.documentElement.removeEventListener('mousemove',trackMouseMove,false);
document.documentElement.removeEventListener('mouseup',stopTrackingMove,false);
forElement.removeChild(marquee);
if (onRelease) callWithBBox(onRelease,marquee);
}
},false);
};
function callWithBBox(func,rect){
var x = rect.getAttribute('x')*1,
y = rect.getAttribute('y')*1,
w = rect.getAttribute('width')*1,
h = rect.getAttribute('height')*1;
func(x,y,x+w,y+h);
}
function updateMarquee(rect,p0,p1){
var xs = [p0.x,p1.x].sort(sortByNumber),
ys = [p0.y,p1.y].sort(sortByNumber);
rect.setAttribute('x',xs[0]);
rect.setAttribute('y',ys[0]);
rect.setAttribute('width', xs[1]-xs[0]);
rect.setAttribute('height',ys[1]-ys[0]);
}
function getLocalCoordinatesFromMouseEvent(el,evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(el.getScreenCTM().inverse());
}
function sortByNumber(a,b){ return a-b }
})(window);

You are lucky I just made this myself. I'm using jQuery SVG plugin ( http://keith-wood.name/svg.html )
$("#paper2").mousedown(function(ev) {
ev.preventDefault();
var pX= (ev.pageX - this.offsetLeft) * viewBox[2]/parseInt($("#paper2").css("width"));
var pY= (ev.pageY - this.offsetTop) * viewBox[3]/parseInt($("#paper2").css("height"));
var rect = svg2.rect(
pX, //X
pY, //Y
1,1, //width and height
{ //Settings, you can make the box dotted here
fill: 'black', "fill-opacity": 0.3, stroke: 'red', strokeWidth: 3, id:rect
}
)
$("#paper2").mousemove(function(ev) {
ev.preventDefault();
var rect= $('#rect');
var pX= (ev.pageX - this.offsetLeft) * viewBox[2]/parseInt($("#paper2").css("width")) - rect.attr("x");
var pY= (ev.pageY - this.offsetTop) * viewBox[3]/parseInt($("#paper2").css("height")) - rect.attr("y");
rect.attr("width", pX);
rect.attr("height", pY);
});
$("#paper2").mouseup(function(ev) {
ev.preventDefault();
var div= $("#paper2");
div.unbind('mousemove');
div.unbind('mouseup');
})
});
paper2 is a div in which I have an svg element (so the svg element and the div have the same height/width). This is how I created the svg2 element:
var svg2;
var root2;
$(document).ready(function() {
$("#paper2").svg({
onLoad: function() {
svg2= $("#paper2").svg('get');
svg2.configure({id: 'svg2'});
var div= $("#paper2");
root2= svg2.root();
$("#svg2").attr("viewBox", viewBox[0]+','+viewBox[1]+','+viewBox[2]+','+viewBox[3]);
},
settings: {}
});
}
If you not using viewbox on the svg element you don't need this on the calculations:
* viewBox[2]/parseInt($("#paper2").css("*****"));
viewbox[2] would be the viewbox width and viewbox[3] would be the viewbox height.

svg appending text element - gives me wrong width

i'm appending a text element to a svg via javascript. After appending i wanna set x and y coordinate, however, it returns me the wrong width of the text element when using it to calculate x.
Interesting:
In Chrome, when actualize the page via F5 or button it returns wrong width, when pressing enter in the adress bar, the width is right - strange!
Here is the small code:
var capt = document.createElementNS("http://www.w3.org/2000/svg", "text");
// Set any attributes as desired
capt.setAttribute("id","capt");
capt.setAttribute("font-family","Righteous");
capt.setAttribute("font-size","30px");
capt.setAttribute("fill", "rgb(19,128,183)");
var myText = document.createTextNode(this.options.captTxt);
capt.appendChild(myText);
this.elements.jSvgElem.append(capt);
capt.setAttribute("x", this.options.windowWidth-this.options.spacer-document.getElementById("capt").offsetWidth);
capt.setAttribute("y", this.options.captY+$('#capt').height());

OK, the problem seems to be that the browser doesn't calculate the correct width when using an other font. Not setting a font results in a correct width.
I solved the problem by setting the reference point ("alignment-point") to the upper right corner ot the text element by setting attributes:
capt.setAttribute("text-anchor", "end");
capt.setAttribute("alignment-baseline", "hanging");
This way i do not have to subtract the width and add the height of the element!

There is a bug:http://code.google.com/p/chromium/issues/detail?id=140472
it just pre init some functions that calculates text width so you should call this function before(i'm sure that there is several extra lines that can be deleted):
fixBug = function () {
var text = makeSVG("text", { x: 0, y: 0, fill: "#ffffff", stroke: '#ffffff'});
text.textContent = "";
var svg = $("svg")[0];
svg.appendChild(text);
var bbox = text.getBBox();
var Twidth = bbox.width;
var Theight = bbox.height;
svg.removeChild(text);
}
$("svg") - Jquery selector