I have the following issue. I have to draw a circle from a lot of points which are too close enough. You could see it in the jsfiddle link below:
http://jsfiddle.net/L6e5oz3L/
<path style="" stroke-dasharray="10 5" fill="#0000ff" stroke="#0000ff" d="M181.8181818181818,225L181.8181818181818,225M181.8181818181818,225L181.7933822865362....
I am using path for the case. Now I have to put stroke-dasharray style on it but actually the points are too close and the dashes are not rendered as expected here:
Do you have some ideas how could I achieve that effect?
I found it - if I use polyline instead of path with fill color "none", It works perfectly.
Related
I am attempting to make a world map made from an svg comprising many circles. I based this from a codepen I found here: https://codepen.io/mvaneijgen/pen/NRzENO
E.g.
<svg viewBox="0 0 845.2 458">
<circle class="st0" cx="826.1" cy="110.3" r="1.9"/>
<circle class="st0" cx="819.3" cy="110.3" r="1.9"/>
<circle class="st0" cx="819.3" cy="117.1" r="1.9"/>
<circle class="st0" cx="812.6" cy="90" r="1.9"/>
The map is great. I have been dividing it up into coloured continent regions using classes. These change colour when hovered over. All good so far. Most of my functionality is there.
The issue is that you have to be hovering directly on a circle to make the colour change happen. I am using a javascript mouseover event to change the colour.
Is there any way of increasing the area of effect around the circle elements? Maybe putting an invisible square either behind or in front? I am still getting to grips with front-end stuff and any pointers here would be great.
That’s the right idea: transparent rects behind each circle. (Or transparent continent-shaped paths based on geo data, depending on what you’re going for.)
The trick is to use the SVG CSS property pointer-events. Setting it to fill or all should do the trick.
Updated picture including (c)
I am using the following code in Javascript to generate an end-marker (a triangular arrow) attached to a line:
edge.marker('end', 10, 10, function (add) {
add.path('M2,2 L2,11 L10,6 L2,2').fill('black');});
The above code generates an arrow that looks like (a) in the attached picture. However, the marker (triangle) extends the line. I would like to generate an arrow as shown in (b) with the pointed end of the marker aligned with the end of the line (and not extend it). Also, it should not look like a triangle as in (a), but an arrow as in (b).
I have tried several variations of the code shown in the description with different values, but they all extend the line, which is not desirable in the image I am generating.
Provided in the description.Picture of actual(a) and desired(b) image
This answer is the result of several comments I've exchanged with the OP. In order to place a marker where you need on a path you may use the refX and refY attributes to define the coordinates for the reference point of the marker.
svg{border:1px solid; width:45%}
path{fill:none; stroke:black; stroke-width:2}
<svg viewBox="0 0 100 50">
<marker id="arrow" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" markerUnits="userSpaceOnUse"
fill="none" stroke="black">
<path d="M2,10 L10,6 L2,2" />
</marker>
<path d="M20,25 H80" marker-end="url(#arrow)" />
</svg>
fill ="none" remove the black color inside the arrow..
add stroke="black"
To prevent lines from changing their thickness, you can also use the
attribute path vector-effect="non-scaling-stroke"
I am working on a JavaScript project, and as part of it, trying to rotate an svg path element around a given point.
Here is a simplified example of the js file:
var angle=0;
d3.select("#canvas")
.append("path")
.attr("id", "sector")
.attr("fill", "red")
.attr("d", "M150,150 L150,50 A100,100 0 0,1 236.6,200 Z")
.on("click", function(){
console.log("click");
angle=(angle+120)%360;
d3.select("#sector")
.transition().duration(2500) //removing this line leads to a nice transform attribute in the resulting html
.attr("transform","rotate("+angle+",150,150)");
})
And the html is just:
<svg id="canvas" width="300" height="300">
<circle cx="150" cy="150" r="100" stroke="blue" fill="none"/>
</svg>
Here you can find it on JSfiddle.
As the comment in the above excerpt suggests, it all works fine with the 3-argument version of the rotate function, where I can specify the x and y coordinates of the point which I want to use as the center of rotation. The resulting path element gets a transform attribute with the value of "rotate(120,150,150)" Unless I want to use a transition.
When I insert the line about the transition, the transformation gets some weird extra things added, it looks like "translate(354.9038105676658, 95.09618943233417) rotate(119.99999999999999) skewX(-3.1805546814635176e-15) scale(0.9999999999999999,0.9999999999999999)"
I guess in the background the non-(0,0)-centered rotation gets replaced with some translations and a (0,0)-centered rotation, just as you can do it in geometry. The position and orientation after the transition is fine indeed. However, during the transformation the element is moving on a funny path, in the example the sector leaves the circle.
Is there a way I can suppress the transition doing all these transformations and just apply a single non-(0,0)-based rotation?
Are there any other workarounds?
Changing the transform-origin for the path element attribute did not seem to work, but maybe I was doing it wrong.
I am looking for a CSS-free solution. It is an architectural decision which I cannot overrule in the project.
As you see, D3 is already involved in the project, but I would like to use as few additional external libraries as possible.
Thanks in advance!
create your arc with its center at (0,0). Then translate it to the center of the circle.
Then the d3 transition will work nicely as follows:
d3.select("#sector")
.transition().duration(2500)
.attr("transform","translate(150,150)rotate("+angle+")");
I am putting together an interactive for a biology project. I want to have the user click on a hyperlinked area of an image to link to more information. I am excited by SVGs because selections can be linked directly to the path without creating an image map overlay.
I used Illustrator to create the SVG and assigned a link to the path in the Attributes panel, but I was disappointed that the link is not active in the browser.
Here is that SVG: http://nspowers.org/bio/flower.html.
Next, I tried ImageMapster. I referenced the US map example (http://jsfiddle.net/juvyh/)
$('img').mapster({
mapKey: 'state'
});
to generate this:
<img src="http://nspowers.org/bio/flower.svg"
usemap="#usa" style="width:202px;height:151px;">
<map id="usa_image_map" name="usa">
<area href="#" state="stamen" full="Flower Identification" shape="poly" coords="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874 99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868">
here: http://jsfiddle.net/nspowers/juvyh/1971 using the Illustrator SVG code.
I do not understand why the selection area is different from the shading-on-hover.
I would appreciate learning the cause of this difference and if there is a better workflow to achieve paths that can be hyperlinked directly within the SVG that will display in the browser.
It appears that the fill="none" attribute on the polygon is what is suppressing the link.
If you change that to fill="rgba(0,0,0,0.0)" (fully transparent black) the link works fine.
Here is a jsfiddle: http://jsfiddle.net/FE9LD/
And here is a jsfiddle with some css to add in the highlight effect (may need latest chrome): http://jsfiddle.net/FE9LD/1/
If you set pointer-events="fill" it will use the fill area as a link no matter what the value of fill is.
<a xlink:href="http://nspowers.org/flower-desc.jpg" >
<polygon fill="none" pointer-events="fill" points="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314
120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874
99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868 "/>
</a>
Demo here
Hello I came across a really interesting looking website :
http://digitalbakery.org/
I wonder how did they provide a background image for the animated SVG Path elements?
I have tried to set a background image for SVG before. Did not work. However looking in the DOM I see in fact the images and SVG are entirely separated. The img are in a ul element specified somewhere.
Is the Path element, when hover, has its opacity reduced to zero hence revealing the img underneath? If so I cannot seem to figure out how is the exact location worked out. How can this effect be achieved?
I have used the named clipPath to crop images. The simplest example:
<svg id="pLayout">
<g>
<clipPath id="hex-mask">
<path d="..."></path>
</clipPath>
</g>
<image x="..." y="..." xlink:href="..." **clip-path="url(#hex-mask)"** />
</svg>
Location calculates by container's vertexes.