I have been struggling for a little while with SVG's and clip paths.
I'm trying to create a triangle clip path that will overlay a photo to give the top a "triangle" edge.
I am trying to achieve exactly the same as the photo, but the triangle "reversed". Imagine that same triangle at the top of the photo instead of the bottom.
How would i achieve this? I am able to create the triangle itself with a fill color, but it will still display the image "above" the triangle.
Found this online, it does exactly what i want but it's the wrong way.
<svg class="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="3 0 97 102" preserveAspectRatio="none">
<path fill="rgba(255,255,255,1)" d="M0 0 L51 102 L0 103 Z M0 205 L100 103 L100 2 Z"></path>
</svg>
Try using an SVG editor, like "Inkskape" (it's free); then:
drag & drop your images, clip & mask what-ever you wish, then
save as "plain SVG"
open the saved SVG file in your favorite text editor and remove the excess code, like the "XML" declaration at the top, and any other extras.
copy & paste the code where-ever you want it
Quick, simple, easy ;)
Related
I got svg triangle as below and i want it to have dimensions 16x16px. No matter what i do it keep to overflow (like puting big image and be able to see only its left top corner. Do you know how to change it via CSS/HTML?
<svg>
<path d="M 471.253,335.129 272.396,82.226 c -17.417,-30.533 -45.661,-30.533 -63.078,0 L 10.473,335.098 c -3.88,5.533 -8.072,15.41 -8.917,22.117 -2.736,21.738 -4.908,65.18 21.444,65.18 h 435.707 c 26.353,0 24.192,-43.416 21.463,-65.148 -0.844,-6.714 -5.031,-16.579 -8.917,-22.118 z"></path>
</svg>
Your svg file/code missing viewBox atribute
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
Context
I want to get an arrowhead on a path to a node in a graph that I am making. Because I am using bezier curves it is easier to use the center of the points to / from which the path ends / starts respectively.
In the attached JSFiddle (below) we see a simple triangle of points, one of which is the control points for a quadratic bezier curve. In addition the end markers have been offset to make contact with the node rather than being partially behind it; this is due to paths being drawn to the centers of the points rather than the edges.
Aesthetically there are a few things not quite right with this drawing:
the tip of the arrow head is thiner than the path
although the tip is angled correctly for the arrowhead on the bezier curve, the path is not centered at the point the arrow head appears.
These aesthetic flaws occur because:
the point of an arrow head is obviously thiner than a path / the path extends through the node
the arrow head is so large in respect to the curvature of the path, there is no satisfactory solution to the arrow head problem (given the current code)
Now one could jury-rig the second issue by making a tight cubic bezier curve as done in the second SVG of the JSFiddle.
However, as seen in the third SVG, this does not work with extreme curvature either.
Questions
Is there either a simple way to ensure that the angle of the arrow-head's point and positions of the path when the arrow head joins are centered; alternatively a way to simply scale the arrow head to be small enough where one would not notice?
Is there a way to make the path starting at the arrowhead to the end invisible? / alternatively a simple way to get paths to end prior to hitting the node?
# code to meet SO requirements
# look at this code
JSFiddle
SVG Marker Demo
For your specific application, try adding a viewBox to the marker to make it smaller so it looks somewhat aligned with the end of the bezier. (SVG markers do not currently align with curves.) Change refX to 'slide' the arrow a bit forward to the end of the line.
e.g.
<marker id="arrow" viewBox="0 0 25 25" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto" markerUnits="strokeWidth">
Why not just make the markers use your coordinate system, instead of strokeweight:
<marker id="arrow" markerWidth="40" markerHeight="30" refX="25" refY="-5"
orient="auto" markerUnits="userSpaceOnUse" overflow="visible">
<!-- path for the arrow head -->
<path d="M-18,10 l 6 -15 l -6 -15 l 40 15 l -40 15 Z"
fill="white"
stroke='black'
stroke-width='3'
opacity='1' />
</marker>
Sorted. If we draw the paths after the "points" so that the arrow heads end up on top:
I'm generating pie charts in SVG (using the ruby library svg-graph, but that isn't totally relevant), but there is a strange edge case where the chart is totally blank. This occurs in Chrome and Safari, but not in IE11 or Firefox.
I've narrowed it down to a certain path element whose d attribute varies slightly between the two. One produces a yellow circle while the other does not. My SVG knowledge is limited, so I don't understand why the second snippet isn't outputting anything. Any ideas?
Working:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M109.0,109.0 L109.0,0.0 A109.0,109.0 0, 1,1, 108.99999000000007 0.0 Z"
transform="translate( -3.216245299353273e-15 10.0 )"
style="fill: #FFDC00" />
</g>
</svg>
Not working:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M108.5,108.5 L108.5,0.0 A108.5,108.5 0, 1,1, 108.49999000000007 0.0 Z"
transform="translate( -3.216245299353273e-15 10.0 )"
style="fill: #FFDC00" />
</g>
</svg>
This may be a rounding issue. The path is trying to draw a circle using the arc path instruction "A". The beginning and ending points of the arc are very close together (< 0.0000001 units). If the SVG renderer thinks the two points are actually the same then it will draw an empty arc (0% of a circle) instead of a nearly complete (99.9999% of a circle).
You can try separating the beginning and ending points slightly further away (e.g., try 359 degrees instead of 360); as the Z instruction will close the path anyway and hide the tiny wedge left over. Also to see more of what's going on try stroking the path instead of filling it.
Or draw a circle using two half-circle arcs. See Circle drawing with SVG's arc path
Using FabricJS, I have a vector that like this:
https://jsfiddle.net/sb63df47/
As you can see, the viewBox is set 0 0 100 100, even though if the vector were trimmed of whitespace, the viewBox would be set to 0 0 30 30. So to make the bounding box appear closer to the icon, I set the width / height to 30 and 30. However when I do that, the sub-paths in the PathGroup object are off (by 35 on the top and 35 on the left).
To deal with this, I applied a transformation matrix to "move" the paths back up to where they need to be. But doing this introduces a whole bunch of other problems. Specifically, when I rotate the vector, the transformation is off (see here: https://i.imgur.com/RxoMBdj.png)
Is there a more elegant way of narrowing the viewBox of a PathGroup if I know the exact width / height that I want it to be set to?
Every SVG is a particular situation,
In any case if you want to modify the objects you have to pay attention to transform Attribute.
Here there is a translate transform that is moving the object of 35x and 35y.
Remove the transform attribute from the group containing paths and the cross will be positioned in the top left corner of the bounding box.
Then if you want to make the bounding box shrink, change the viewbox to 0 0 30 30
An equivalent transformation is to set up the viewbox to 35 35 30 30 that will apply both a movement in the corner and a shrink.
There are so many ways to obtain the same effect.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 30 30" version="1.1" x="0px" y="0px"><title>add</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g sketch:type="MSArtboardGroup" fill="#000000"><g sketch:type="MSLayerGroup" ><path d="M0,14 L30,14 L30,16 L0,16 L0,14 Z" sketch:type="MSShapeGroup"></path><path d="M14,0 L16,0 L16,29.94 L14,29.94 L14,0 Z" sketch:type="MSShapeGroup"></path></g></g></g></svg>
I have a SVG path:
<path d="M124 442 L124 442 L166 393 L162 332 L200 251 L179 76" stroke="red" stroke-width="2" fill="none" fill-opacity="0.1"></path>
And I want that a DIV element move along this path when I click a "next-button".
It's like:
*startpoint (beginning of the path) + DIV element
*click next-button* + DIV element moves to station 1
*station 1
*click next-button* + DIV element moves to station 2
*station 2
*click next-button* + DIV element moves to the end of the path
endpoint (end of the path)
Does anyone have an idea how I could do that?
Found a very helpful tools. Its called path animator.
That could be your friend.
https://github.com/yairEO/pathAnimator
If you really want to animate an HTML element using SVG, then you might want to have a look at animateMotion and foreignObject.
However, this might not be the ideal and most widely supported solution in your situation. Why not use the "traditional" JavaScript way, animating the style attribute? As long as your path is restricted to simple straight line segments, this should not be too hard.