Please consider the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" width=100 height=100 viewBox="0 0 512 512">
<!-- path fill="none" stroke-linecap="round" stroke-width="10" stroke="black" d="M256 256 5 5 V507"/ -->
<path fill="none" stroke-linecap="round" stroke-width="10" stroke="black" d="M256 256 5 5m0 0V507"/>
</svg>
I want the top left corner to be rounded, hence, I am using stroke-linecap="round". I would have expected the remarked path statement to work, but it yields a sharp corner. I did have to move the pointer relative by m0 0 before drawing the vertical line V507 to get the desired result. I don't understand why a relative m0 0 movement makes sense. Is this by design or a bug?
Is it possible to add more than one or two strokes on a single svg path.
Ex.
This is my code
<svg id="" xmlns="http://www.w3.org/2000/svg" height="576" width="576" style="position: absolute;">
<path d="M 10,10 L 10,20 20,20 20,10 30,10" fill="#ff0000;" stroke="#f000" stroke-width="1px" ></path>
</svg>
and I want stroke color like as a below image:
One path, one stroke.
You may redraw the same path over and over using different settings of stroke-dasharray with different colors, so that three gaps will be followed by one segment in a specifc color. However, the length of such segments would have to coincide with the length of the line segments.
If the line segments (from corner to corner) have a differing length within the path, then this would not work.
And: the length of the line segments has to match exactly the length of th egaps specified by stroke-dasharray.
Edit: For aligning the length, you may explicitly set the path length within the path element using pathLength="100"
and combine that with stroke-dasharray="25, 75" and varying value of
stroke-dashoffset steping through 0, 25, 50, 75
I have split path and give different colors.
<svg id="" xmlns="http://www.w3.org/2000/svg" height="576" width="576" style="position: absolute;">
<path d="M 10,10 L 10,20" fill="#ff0000;" stroke="yellow" stroke-width="1px" ></path>
<path d="M 10,20 L 20,20" fill="#ff0000;" stroke="red" stroke-width="1px" ></path>
<path d="M 20,20 L 20,10" fill="#ff0000;" stroke="blue" stroke-width="1px" ></path>
<path d="M 20,10 L 30,10" fill="#ff0000;" stroke="green" stroke-width="1px" ></path>
</svg>
I have a curved svg line like this
<path d="M70,260 C105,260 126,330 160,330"
style="stroke: #ff4444;stroke-width:2; fill:none;"/>
what I want is to add another svg (like https://www.flaticon.com/free-icon/play-button_149657) in the middle of my line pointing to the end point.
any ideas?
One way to achieve the result is a degenerate animation:
Define the marker shape (obj1 in the example below)
Position the marker at the beginning of the curve (track1 below; this is the path definition from your example).
Specify an animated motion of the marker shape along the curve with some particular settings:
Explicit positioning along the track using keyTimes, keyPoints attributes, limiting the range of positions to exactly one point: the midpoint of the curve
Infinite duration, infinite repeat
Auto-rotation of the shape according to the orientation of the track curve ( rotate attribute )
Effectively there is no animation at all but the shape is positioned at the center of the curve, properly oriented.
Example
<html>
<head>
<title>SVG object centered on path</title>
</head>
<body>
<svg width="200px" height="200px"
viewBox="0 0 500 500"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<path
id="obj1"
d="M11.18,0 L-2.5,10 -2.5,-10 Z"
stroke="black" stroke-width="1" fill="green"
>
</path>
<path
id="track1"
d="M70,260 C105,260 126,330 160,330"
stroke="#ff4444" stroke-width="2" fill="none"
/>
</defs>
<use xlink:href="#track1"/>
<use xlink:href="#obj1">
<animateMotion
calcMode="linear"
dur="infinite"
repeatCount="infinite"
rotate="auto"
keyPoints="0.5;0.5"
keyTimes="0.0;1.0"
>
<mpath xlink:href="#track1"/>
</animateMotion>
</use>
</svg>
</body>
</html>
There are a number of ways to do this.
One way is to "cheat" a little and use a <textPath> and an arrow character.
SVG marker-mid on specific point on path
This is a little hacky, and may not work reliably on all browsers, but it may be good enough for your needs.
Another way is split the path in two (using De Casteljau's algorithm), and use a <marker>.
<svg viewBox="0 200 200 200" width="400">
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<path d="M 70,260
C 87.5,260 101.5,277.5 115.375,295
C 129.25,312.5 143,330 160,330"
style="stroke: #ff4444; stroke-width:2; fill:none; marker-mid:url(#Triangle)"/>
</svg>
There are other ways using Javascript. For example, you could use the SVGPathElement.getPointAtLength() method to find the coordinates of the centre of the path. Then position a triangle at that location.
I have been trying hard to set the animation on circle. I have reached to this point :
[I just want small help to move the animated loader on O in that svg like below link
http://codepen.io/tutsplus/full/ByRzOV/
I did try play with O points and calculations but did not get success. Am I doing something wrong?
Thank you in advance mates. Really appreciated. Kind Regards]1
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve">
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4
c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z
M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41
h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2
C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9
C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9
L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/>
<path class="path" stroke="#232527" stroke-width="5" stroke-dasharray="0,1000" fill="#fff" d="M120.2
,2.7c-14.1,0-25.6,11.5-25.6
,25.6c0,14.1,11.5,25.6,25.6
,25.6c14.1,0,25.6-11.5,25.6-25.6
,25.6c14.1,0,25.6-11.5,25.6-25.6
"/>
</svg>
The coordinates in your last bezier curve command in the 'O' path are a bit messed up. Try this:
<path class="path" stroke="#232527" stroke-width="5" fill="none"
d="M120.2,2.7
c-14.1, 0 -25.6, 11.5 -25.6, 25.6
c0, 14.1, 11.5, 25.6, 25.6, 25.6
c14.1, 0, 25.6 -11.5, 25.6 -25.6
c0, -14.1, -11.5, -25.6 -25.6 -25.6"/>
I've removed the fill and the dasharray above so you can actually see the path properly.
This should give you a start on getting you animation going.
I am in the middle of writing SVG output from MuPDF, and I've run up against what seems to be a limitation in the capabilities of SVG. I thought I'd ask here in case this was a known problem with a known workaround (or in case I'm doing something stupid!)
I have the following SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21.59cm" height="27.94cm" viewBox="0 0 600 600">
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
<clipPath id="cp0">
<path stroke-width="12" fill="none" stroke="#000000" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
</clipPath>
<g clip-path="url(#cp0)">
<rect fill="#ff0000" x="0" y="0" width="600" height="600"/>
</g>
</svg>
This draws a stroked path (shaped like '[' in blue). Then it sets the same path to be a clipping path, and fills the clipping path in red.
I was hoping that the clipping path would be set to the stroked version of the path, and hence the red shape would exactly overwrite the blue one. In my tests here however, the "fill or strokedness" of the path is ignored, and the path is "filled" - hence I get a red square drawn within the blue shape.
Is there a way to get the behaviour I was hoping for? Or am I going to have to write code to manually flatten and stroke paths before outputting them to SVG?
Thanks in advance for any replies!
Clip-paths in svg are meant to be just the shape, not the traits of the shape, so in other words you'll not get the stroke included. What you can do is use a mask instead, setting the stroke of the path in the mask to white.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600">
<defs>
<mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
<path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" />
</mask>
</defs>
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
<g mask="url(#m0)">
<rect fill="yellow" x="0" y="0" width="600" height="600" />
</g>
</svg>