I have an SVG path like the blue one above. How can I create a Path like the black one, that is inset by a fixed distance (red) from every side of the black Path?
I try to scale the path element but that's not in a same distance with every line
Does this thread help you ?
https://stackoverflow.com/a/12723835/6852641
There are some nice examples such as http://jsfiddle.net/BbYV6/ which uses masks and stroke width to create an "offset path" effect
<mask id="myMask" maskUnits="objectBoundingBox">
<use xlink:href="#text" fill="#FFFFFF" stroke="#000000" stroke-width="20" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="40"/>
</mask>
Related
When I create a SVG Path in Illustrator and change the position of the points for a morphing animation the points are totally different!
For example:
<path d="M 355.077,300c-31.017,0-31.017-200-62.034-200 s-31.017,200-62.034,200c-31.015,0-31.015-200-62.031-200c-31.014,0-31.014,200-62.029,200c-31.013,0-31.013-200-62.026-200"/>
and
<path d="M355.077,217.635 c-31.017,0-31.017-64.507-62.034-64.507s-31.017,185.701-62.034,185.701c-31.015,0-31.015-274.316-62.031-274.316 c-31.014,0-31.014,175.276-62.029,175.276c-31.013,0-31.013-97.737-62.026-97.737"/>
are the same path (with moved points obviously). However, the order in which they occur is totally different and therefore the animation pushes the points all around the SVG element.
I have tried all export scripts Illustrator offers.
Is there a trick for getting a consistent result when exporting? So that the points are at the right place? Perhaps a plug-in I can use?
Thanks!
This is not an answer. This is just to say that the paths can be used for morphing since the commands and the number of the commands is the same. However if the paths you have are different a solution would be to change all the commands to C
<svg viewBox="0 0 400 400" width="300">
<path fill="gold" d="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200">
<animate
attributeName="d"
attributeType="XML"
values="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200;
M355.077,217.635
c-31.017,0-31.017-64.507-62.034-64.507
s-31.017,185.701-62.034,185.701
c-31.015,0-31.015-274.316-62.031-274.316
c-31.014,0-31.014,175.276-62.029,175.276
c-31.013,0-31.013-97.737-62.026-97.737;
M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200"
dur="5s"
repeatCount="indefinite"/>
</path>
</svg>
There is a cubic bezier with arrow marker:
<defs>
<marker id="arrow" orient="auto" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" refX="10" refY="6">
<path d="M0,0 L0,12 L12,6 z"></path>
</marker>
</defs>
<path marker-end="url(#arrow)" d="M 220 104 C 220 144 400 184 400 224" stroke-width="2"></path>
I want to shift arrow head to the center of curve, but when I mutating refX attr of marker arrow shifts not across the curve but straight to top (http://prntscr.com/ikzuol). It works perfectly with quadratic bezier curves but not with cubic.
Is there a way to display an arrow head at the center of cubic bezier curve with correct orientation using marker?
I know there is an option to get coordinates at length, calculate angle to rotate and do positioning and rotation by myself but I would like to avoid such calculations.
UPD: I've created a codepen to demonstrate the issue: https://codepen.io/onatolich/pen/LQqYvr
UPD2: one more codepen to demonstrate that it's working with quadratic bezier curves: https://codepen.io/onatolich/pen/NyoxQv
refX and refY are points in the coordinate system the marker is defined in and have no relation to the direction of the path. They simply define the point that is considered the origin of the marker and wich will be placed on the end of the path.
There is no way to define a marker along a computed path. Markers can only be placed at the vertices of a path. So the seemingly straight-forward way would be to find a mid-point, place a vertex there with appropriate cubic bezier control points...
<svg width="500" height="500">
<defs>
<marker id="arrow" orient="auto" markerUnits="userSpaceOnUse"
markerWidth="12" markerHeight="12" refX="3" refY="6">
<path d="M0,0 L0,12 L12,6 z"></path>
</marker>
</defs>
<path marker-mid="url(#arrow)"
d="M 220,104 C 220,124 265,143 310,162.5 355,182 400,202 400,224"
stroke-width="2" stroke="black" fill="transparent"></path>
</svg>
...but that is obviously a lot of computation, also.
Here is a hack that uses the <animateMotion> element, not to animate anything, but because it can move an object to every point along a path. The movement just starts, ends, and freezes in the middle of the path.
The "marker" does not have its own viewport, which means there is no way to define a refX/refY. The point to be placed on the path is always at (0,0) of its userspace coordinates. That is the reason the marker has to be moved in the opposite direction of these values.
<svg width="500" height="500" >
<path id="path1" d="M 220 104 C 220 144 400 180 400 224"
fill="none" stroke-width="2" stroke="black" />
<path d="M0,0 L0,12 L12,6 z" transform="translate(-3,-6)">
<animateMotion dur="0s" rotate="auto" fill="freeze"
keyTimes="0;1" keyPoints="0.5;0.5" calcMode="linear" >
<mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
The hack will not work with Edge/IE, which do not implement SMIL animations.
I have an SVG Polyline in Left to Right (LTR) mode as follows:
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points="05,30
15,30
15,20
25,20
25,10
35,10" />
</svg>
How to draw this same line in Right to Left (RTL) mode? Should I be using transform or translate properties?
The solution to my question was to simply re-draw the SVG's mirror image. This can be done by using transform, translate and scale properties as below:
transform = "translate($width, 0) scale(-1,1)"
Here, scale() function is used as a mirror function by scaling by -1 along either the x-axis or y-axis.
Code:
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points="05,30
15,30
15,20
25,20
25,10
35,10" transform="translate(50,0) scale(-1, 1)"/>
</svg>
Note: As Robert mentioned in the comments, the global direction attribute is only applicable to text elements but not to the graphic elements. So, in my js file, I check if the direction is rtl or not and then display the mirrored svg if it is true.
The link for the fiddle is here: https://jsfiddle.net/ShellZero/vzaoysw7/5/
The following two links helped me out in solving my problem:
[1] https://sarasoueidan.com/blog/svg-transformations/
[2] https://www.w3.org/TR/SVG/coords.html#Introduction
How can I create an arc shape like this:
With CSS or jquery or javascript
You don't even need CSS/JS to draw this. Just use an <svg> element.
<svg width="270" height="120">
<path
d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
stroke-width="3"
stroke="#A5423A"
fill="none"
/>
</svg>
You could use SVG for this. There is an arc path command which you could use.
As your comment states, you want to place content inside the arc and you want them to rotate.
Content like text or image could be placed inside the svg.
Rotation can be achieved with transform=rotate(..).
If you want to do more animations with SVG you could have a look at D3.js. If you just want to create some arcs, you possibly can do the math on your own for computing the SVG path string.
#AlliterativeAlice is correct.
But for this shape I would use two arcs instead of a lot of C paths.
I also prefer to use relative paths instead of absolute one.
So my solution used arcs and lines instead of only Bezier Curves.
<svg width="300px" height="300px" viewBox="0 0 100 100">
<path d="m 10,60
a 50 50 0 0 1 80,0
l -10,10
a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>
How a rect element can be used for clipping the content using rapaheljs ? I achieved this by creating the elements manually. The markup I created is given below and now I want to do this with raphaeljs.
<clipPath id="clipper">
<rect x="0" y="0" height="160" width="250"/>
</clipPath>
<g clip-path="url(#clipper)">
...
...
</g>
Or is there any other method using rapaheljs for creating a clipping rectangle like this ?
Any help would be appreciated. Thanks.
In Raphaël this is how:
elm.attr({clip-rect: "0 0 160 160"})
...where elm is the <g> element in your example.