Related
I'm trying to get the svg clip path to move with the svg element, but the two seem to be attached. I'm basically looking to make a mouse moveable clip, and it needs to all be implemented in javascript. What's going on?
var clip = document.getElementById('svgPath');
var goggles = document.getElementById('gogglesMain');
var blur = document.getElementById('blur');
var mouse = {x:100, y:100};
//mouse listener to move goggles
document.addEventListener('mousemove', mouseListen, false);
function mouseListen(e){
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY;
gogglesMain.style.left = mouse.x - 300 + "px";
gogglesMain.style.top = mouse.y - 100 + "px";
}
https://jsfiddle.net/9n414sxs/
I'm not clear on exactly what you are trying to do, but it sounds like you think that moving the SVG, that contains a <clipPath>, will also move the clipped area of the div you are clipping with it.
That is not the case. Any clipPath that you are using from CSS is totally independent of the position of the SVG that it is a part of. You are just borrowing the clipPath definition from it.
If you want to change the area that's clipped, you would have to move the clipPath itself. Unfortunately, that doesn't seem to be reliable at the moment.
For example, the following demo almost works.
Demo here
Following this example
http://jsfiddle.net/4xXQT/
I was able to render the points coordinates stored in one array using D3 as follow
https://jsfiddle.net/il_pres/qq9o1ovt/.
var vis = d3.select("body").append("svg")
.attr("width", 30)
.attr("height", 30);
var regioni = [{regione:'Abruzzo',polygon:{points:'25.171,18.844 25.094,18.582 24.567,17.714 24.015,17.714 23.226,16.899 22.805,16.268 21.911,14.558 21.043,14.427 20.753,15.163 20.043,15.084 19.938,15.741 19.386,16.268 19.386,17.056 18.439,16.899 18.202,17.345 18.334,17.924 18.281,18.582 19.57,19.423 18.939,20.055 18.176,19.581 17.756,20.16 17.808,20.844 18.703,21.08 19.517,21.396 19.491,22.079 20.517,22.185 20.596,22.605 21.122,22.133 21.832,22.658 22.568,22.737 23.094,23.473 23.646,22.553 23.751,21.738 24.646,21.212 25.094,21.738 25.409,22.29 26.25,21.238 26.409,20.475 26.776,19.923 26.303,19.634 26.145,19.292'}},{regione:'Basilicata',polygon:{points:'24.607,15.268 23.476,14.716 23.818,14.4 23.161,13.848 22.556,14.111 22.135,14.005 21.529,14.452 20.53,14.716 19.294,14.111 18.952,13.742 18.426,14.242 18.479,14.926 17.637,14.321 17.295,14.531 17.479,15.426 16.611,16.083 17.216,16.451 17.637,17.556 18.321,18.214 18.453,18.792 19.189,18.871 19.61,18.424 20.662,19.186 20.662,19.581 20.109,19.844 19.978,20.344 20.662,20.081 21.188,20.318 21.372,20.002 21.951,19.713 22.424,19.713 22.949,20.265 23.423,20.896 23.555,21.448 23.187,22.053 23.213,22.658 23.844,23.027 24.475,23.105 25.159,23.605 25.08,23.894 25.58,24.157 26.158,24.157 26.5,23.552 27.105,23.552 27.631,22.816 27.92,22.238 27.579,21.291 26.658,20.475 26.132,19.844 26.053,19.239 25.238,18.45 25.238,17.766 26.001,17.74 26.264,17.398 26.21,16.609 25.764,16.32 24.712,16.136'}}];
vis.selectAll("polygon")
.data(regioni) .enter().append("polygon")
.attr("points",function(d) {return d.polygon.points})
.attr("stroke","red")
.attr("stroke-width",0.1);
Now I was trying to do the same with the same svg shape, this time stored as d coordinates
var regionico =[{Regione:'Abruzzo',polygon:{points:'m 127.945,84.9805 -0.781,2.6172 -5.273,8.6835 -5.508,0 -7.891,8.1528 -4.219,6.308 -8.9292,17.09 -8.6836,1.32 -2.8985,-7.363 -7.1015,0.789 -1.0547,-6.57 -5.5157,-5.266 0,-7.89 -9.4648,1.582 -2.3711,-4.4731 1.3164,-5.7812 -0.5273,-6.582 12.8906,-8.4063 -6.3086,-6.3203 -7.6367,4.7383 -4.1992,-5.793 0.5273,-6.8359 8.9453,-2.3633 8.1445,-3.1641 -0.2617,-6.8242 10.2617,-1.0664 0.7813,-4.1992 5.2656,4.7265 7.0977,-5.2539 7.3632,-0.7812 5.25,-7.3633 5.527,9.1992 1.055,8.1446 8.945,5.2656 4.473,-5.2656 3.164,-5.5157 8.399,10.5157 1.601,7.6367 3.652,5.5195 -4.726,2.8906 -1.582,3.418 -9.727,4.4805'}},{Regione:'Basilicata',polygon:{points:'m 123.746,104.57 -7.637,-4.7458 -9.453,3.4178 -3.961,8.692 -12.3512,2.089 2.1093,9.739 -7.6289,4.734 -5,-5.516 -6.0547,3.418 -7.3633,-7.109 0.5274,-7.891 -2.6172,-3.41 -7.6367,-0.527 0,-6.57 8.1445,-7.9027 0.8008,-6.0352 5.2539,-6.3281 9.4727,-8.1445 3.4101,-9.4727 -3.1562,-6.0547 -5,-7.0898 5.2617,-5.2617 2.1094,-5.2539 2.8906,6.8242 8.9375,0.8008 3.4375,-7.625 16.8128,4.207 3.945,14.9805 12.109,-1.0547 9.981,23.4101 -9.727,5.7891 0,14.4723 -7.617,3.418'}}
but if I use the same code with d as attr.
vis.selectAll("path")
.data(regionico).enter().append("path")
.attr("d",function(d) { return d.polygon.points})
.attr("stroke","red")
.attr("stroke-width",0.1);
it doesn't work.
Any suggestion?
The problem is simply that your SVG isn't big enough to make the path visible -- note in particular how you're first moving more than 100 pixels to the right before starting the path. It works fine if you make the SVG bigger, e.g. 300x300 here.
Here's the fiddle: http://jsfiddle.net/DevChefOwen/CZ6Dp/
var text = g.append("text")
.style("font-size",30)
.style("fill","#000")
.attr("dy",0)
.append("textPath")
.attr("xlink:href","#yyy")
.style("text-anchor","left") // using "end", the entire text disappears
.text("some text");
I've tried a number of different things to no avail. The left align is the easy part. If you did a middle, though, you see only "text" instead of "some text", implying that "some" is just hidden because it went "out of span" for the given arc.
If, however, I added:
.attr("startOffset","39%")
(as in here: http://jsfiddle.net/DevChefOwen/2H99c/)
It would look right aligned, but outside of programmatically trying to get the width/height of the text element and look for sharp changes in width/height (which seems wrong and likely error-prone), I can't seem to find a way to right align the text.
I've also tried using an SVG path (essentially a curved arc line) and the same disappearing act happens with the text when "text-anchor" is set to "left".
Thanks ahead for your time!
The question is somewhat confusing matters. The issue isn't aligning text at the end of the path -- that's easy to do with "text-anchor"="end" and "startOffset"="100%".
However, using those settings with the path created by the d3 arc function, you end up with the text cornering around the end of the inside curve and the left straight edge, to the end of the path as defined by the arc function:
http://jsfiddle.net/CZ6Dp/8/
The real issue is that the path that you want the text to be aligned along (the outside arc of the shape) is only one segment of the path that defines the shape.
(By the way, "left" and "right" are not valid values for the "text-anchor" property, and will just be ignored).
The answer by #defghi1977 gives one way to approach the problem, by figuring out the length of the path segment that you do want to use and adjusting the start offset accordingly.
Another way to approach the problem is to create a separate path (not drawn on screen) that represents only the part of the path that you want to be used for positioning text.
There are a number of possible ways to create a path that only represents the outside arc (some example code here). #defghi1977's approach of grabbing it from the existing path with regular expressions is probably the most efficent for your situation. But instead of just creating a temporary element to calculate a length, I actually have to add the new path to the DOM so it can be used as the reference path for the <textPath> element. (Which I suppose is the downside to this approach -- twice as many DOM elements!)
var path = g.append("svg:path")
.attr("d", arct)
.style("fill","#ccc")
.attr("transform", "translate("+cfg.w/2+","+cfg.h/2+")")
.each(function(d,i) {
var justArc = /(^.+?)L/;
//grab everything up to the first Line statement
var thisSelected = d3.select(this);
var arcD = justArc.exec( thisSelected.attr("d") )[1];
defs.append("path")
.attr("id", "yyy") //normally the id would be based on the data or index
.attr("d", arcD)
.attr("transform", thisSelected.attr("transform") );
//if you can avoid using transforms directly on the path element,
//you'll save yourself having to repeat them for the text paths...
});
var text = g.append("text")
.style("font-size",30)
.style("fill","#000")
.attr("dy",0)
.append("textPath")
.attr("xlink:href","#yyy")
.style("text-anchor","end")
.attr("startOffset","100%")
.text("some text");
http://jsfiddle.net/CZ6Dp/9/
Again, factoring in the extra DOM load #defghi1977's method is probably slightly preferrable, although this version has the benefit of not being dependent on browser support for getTotalLength. But as far as I know that method is fairly well implemented.
So just consider this an alternate approach for completeness' sake.
This path is constructed by 4(or 5) path segments.
So, this probrem will be solved to get first arc path length.
But I don't know how to get sub path length by using d3.js, thus I use svgdom directly.
I tried to fix your code. If this code is not what you hope, I'm sorry.
path-anchor attribute to end.
define function to get startOffset value.
var path = g.append("svg:path")
.attr("id","yyy")
.attr("d", arct)
.style("fill","#ccc")
.attr("transform", "translate("+cfg.w/2+","+cfg.h/2+")");
var text = g.append("text")
.style("font-size",30)
.style("fill","#000")
.attr("dy",0)
.append("textPath")
.attr("xlink:href","#yyy")
//.style("text-anchor","left") // using "end", the entire text disappears
.attr("text-anchor", "end")
.text("some text")
.attr("startOffset",function(){
var d = document.getElementById("yyy").getAttribute("d");
var tmp = document.createElementNS("http://www.w3.org/2000/svg" ,"path");
//get the arc segment of path
var arc = d.match(/(^.+?)L/)[1];
tmp.setAttribute("d", arc);
//return offset position
return tmp.getTotalLength();
});
I think the confusion comes from the meaning of text-anchor - it's not "relative to where on the parent will I justify" but rather "what part of me should I align to the start".
You're right to try to use startOffset to move the origin. Since the outer radius of your path is longer than the inner radius, the correct start offset is a little more than half of the path (around 53%).
Just a little more twiddling with your settings and you should have it. Here's a fiddle with my interpretation of what you're looking for.
I'm importing a svg (served as static content from the server) in this way
d3.xml("http://localhost:3000/mysvg.svg", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
var mySvg = d3.select("#somediv").node().appendChild(importedNode);
then I'm trying to iterate through all svg paths and do something with them
d3.selectAll("#somediv svg path").each(function(d, i) {
console.log(this, d, i);
});
}
what I'm getting is this problem
i is from 1 to number of path, which is correct.
d is undefined instead of being the right svg path element.
this is the svg path element, like this one
<path id="m021" fill="#00AAFF" d="M225.438,312.609c-0.665-1.084-1.062-1.691-2.368-1.963c-0.582-0.121-1.686-0.271-2.265-0.069 c-0.507,0.174-0.637,0.649-1.431,0.368c-0.934-0.33-0.665-1.272-0.71-2.104c-0.597-0.021-1.18,0-1.733,0.262 ...etc" ></path>
I expected d to be the real svg path, why is it not?
EDIT:
A little insight on what I want to do could maybe help.
I have a svg with one path for each district of my town. I want to make some piecharts in the center of each path. I don't have the data now, it will be used for the piecharts. I want to make a mouseover function on the path, and add a little red circle (that in a future step will become the pie chart) on each path.
What is the best way to do this?
Simplifying your original request, let's suppose you want to add a circle in the center of each district. Let's assume that the districts are relatively square. Note that this would be much more simpler if you have geographical data instead of paths.
var svg = d3.select("#somediv svg");
var districts = svg.selectAll("path");
var district_centers = districts[0].map(function(d, i) {
var bbox = this.getBBox();
return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
});
svg
.selectAll("circle")
.data(district_centers)
.enter()
.append("circle")
.attr("class", "district_circle")
.attr("cx", function(d){ return d[0]})
.attr("cy", function(d){ return d[1]})
.attr("r", 10)
.attr("fill", "red");
According to the API doc for selection.each, d should be the datum, which you will not have if you have not previously called .data() to bind data to the nodes. All you have is pure SVG with no data bound to it.
I notice that your paths do have IDs, so if you have a dataset matching those ID's you can probably bind to it using the keys parameter of the .data function
I am trying to create some login buttons based on the RaphaelJs icons, but on the example page there is only the Twitter paths that are available!
So I am looking to understand how to extract the SVG paths from Inkscape and update the example on http://jsfiddle.net/aqoon/LN23r/5/ for Google using http://upload.wikimedia.org/wikipedia/commons/2/28/Google_free_icon.svg file
var facebookBtn = "",
googleBtn = "M47.446122,148.46699L47.463496,149.0968L47.430196,149.09969C47.363594,148.8854247.278172,148.7259147.173az931,148.62119C47.069686,148.5164646.943725,148.464146.796048,148.4641C46.681186,148.464146.582493,148.4875146.499968,148.53432C46.417441,148.5811346.340465,148.6571446.269039,148.76235C46.124256,148.9775946.051865,149.2237246.051865,149.50074C46.051865,149.6329846.069239,149.7577346.103987,149.875C46.138734,149.9922846.189408,150.095846.256009,150.18556C46.385347,150.359346.54316,150.4461746.729448,150.44617C46.802803,150.4461746.871816,150.4307346.936487,150.39984C47.001155,150.3689547.054242,150.3264847.095748,150.27243C47.152694,150.1971547.181168,150.1078647.18117,150.00458C47.181168,149.9090347.155349,149.8400247.103711,149.79755C47.05207,149.7550846.96689,149.7338446.84817,149.73384L46.84817,149.70054L47.771883,149.70054L47.771883,149.73384C47.686942,149.7415647.62734,149.7533947.593076,149.76931C47.558809,149.7852447.533472,149.8125147.517065,149.85111C47.498724,149.8935947.489555,149.9780447.489557,150.10448C47.489555,150.1392347.491485,150.1932847.495348,150.26664L47.498244,150.29994C47.461564,150.2864347.434538,150.2796747.417165,150.27967C47.395929,150.2796747.368903,150.2907747.336087,150.31297C47.252112,150.3708847.154625,150.4152847.043626,150.44617C46.932625,150.4770646.815351,150.492546.691804,150.4925C46.521925,150.492546.368697,150.4635546.23212,150.40563C46.095541,150.3477245.984782,150.2647145.899844,150.15661C45.836139,150.0755345.787154,149.9790145.752889,149.86704C45.718624,149.7550845.701491,149.6363545.701491,149.51088C45.701491,149.338145.732378,149.1773945.794152,149.02875C45.855926,148.8801145.942795,148.7575346.054761,148.661C46.146456,148.5828246.252147,148.5224946.371835,148.48002C46.491521,148.4375646.617964,148.4163246.751165,148.41632C46.828382,148.4163246.900049,148.4235646.966168,148.43804C47.032284,148.4525247.102503,148.4761647.176826,148.50898L47.262248,148.54807C47.283481,148.5567647.302785,148.561147.320161,148.5611C47.358768,148.561147.388207,148.5297347.408479,148.46699L47.446122,148.46699z",
twitterBtn = "M14.605,13.11c0.913-2.851,2.029-4.698,3.313-6.038c0.959-1,1.453-1.316,0.891-0.216c0.25-0.199,0.606-0.464,0.885-0.605c1.555-0.733,1.442-0.119,0.373,0.54c2.923-1.045,2.82,0.286-0.271,0.949c2.527,0.047,5.214,1.656,5.987,5.077c0.105,0.474-0.021,0.428,0.464,0.514c1.047,0.186,2.03,0.174,2.991-0.13c-0.104,0.708-1.039,1.167-2.497,1.471c-0.541,0.112-0.651,0.083-0.005,0.229c0.799,0.179,1.69,0.226,2.634,0.182c-0.734,0.846-1.905,1.278-3.354,1.296c-0.904,3.309-2.976,5.678-5.596,7.164c-6.152,3.492-15.108,2.984-19.599-3.359c2.947,2.312,7.312,2.821,10.555-0.401c-2.125,0-2.674-1.591-0.99-2.449c-1.595-0.017-2.608-0.521-3.203-1.434c-0.226-0.347-0.229-0.374,0.14-0.64c0.405-0.293,0.958-0.423,1.528-0.467c-1.651-0.473-2.66-1.335-3.009-2.491c-0.116-0.382-0.134-0.363,0.256-0.462c0.38-0.097,0.87-0.148,1.309-0.17C6.11,10.88,5.336,9.917,5.139,8.852c-0.186-1.006,0.005-0.748,0.758-0.46C9.263,9.68,12.619,11.062,14.605,13.11L14.605,13.11z",
yahooBtn = "";
$('.twitterBtn').each(function(i) {
paper = Raphael($(this)[0], 40, 40)
paper.path(twitterBtn).attr({
"fill": "#333"
})
})
$('.googleBtn').each(function(i) {
paper = Raphael($(this)[0], 40, 40)
paper.path(googleBtn).attr({
"fill": "#333"
})
})
I tried to strip the SVG file so that I just have one layer and only the 'G' but on the http://jsfiddle.net/aqoon/LN23r/5/ is not being displayed, what am i missing?
Also how do i add extra layers to the var googleBtn, as when I open the http://upload.wikimedia.org/wikipedia/commons/2/28/Google_free_icon.svg in Inkscape there are many layers and paths?
Raphael does not support ( SVG files in Raphael, can they be used?… ) loading whole SVG images and using those as paths, so the only reasonable option here is to extract separate paths and store them in some sort of datastructure, like in the example with the tiger ( http://raphaeljs.com/tiger.html ) -- check the source code there.
The SVG files can also have rather strange internal coordinate system, so it pays to adjust the view box after loading one, like this
var path = paper.path(googleBtn).attr({
"fill": "#333"
});
var bbox = path.getBBox();
paper.setViewBox(bbox.x, bbox.y, bbox.width, bbox.height);
To group different elements, one can use Raphael.Set http://jsfiddle.net/LN23r/40/
var shadow = paper.path(googleBtn).attr({"fill": "#0F0", "stroke":"none"}).translate(0.08,0.08);
var path = paper.path(googleBtn).attr({"fill": "#333", "stroke":"none"});
var set = paper.set(shadow, path);
var bbox = set.getBBox();
paper.setViewBox(bbox.x, bbox.y, bbox.width, bbox.height);
When grouping elements, note that they have transformation matrices associated with them in the SVG file (e.g. transform="matrix(204.67566,0,0,204.67566,-9225.9642,-30242.949)"), which affects the respective position and scale of the elements.
On the whole, the process of porting paths from SVG is not entirely trivial, but manageable. There is also a plugin that may help you with this, see https://github.com/wout/raphael-svg-import