Exmaple is by link
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
As you can notice the end of line has cut corner, not filled to the end of border. How to smooth this?
The corner is truncated because it goes beyond your canvas. Just make your canvas a little bigger or your line a little smaller and it will work
Here's an exemple where i moved the line by 1 unit to the right and made the canvas sligtly bigger. You can see that the corners are as they sould be
<svg viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="80" x2="100" y2="20" stroke="black" />
</svg>
You need to clarify what you mean by "filled to end of border".
If you mean that you want the line to go all the way to the SVG border without seeing the end of it, then there are two solutions.
Draw your line a little longer. So it goes all the way off the SVG. Right now it stops right at the border, and because of the angle, part of the end is visible.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="-2" y1="80" x2="102" y2="20" stroke="black" />
</svg>
Alternatively, you could give the line square end caps. That will extend the line a little, so it will go just far enough. However this will only work if your line isn't too steep. If it gets steeper than 45 degrees, the end of the line will start to become visible again.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-linecap="square" />
</svg>
Related
2 questions about this CodePen
Why isn't the red balloon ending up centered on the crosshairs, given that I've set transformOrigin:"50% 50%"?
Why does the green balloon seem to have its origin set to "left top" when, according to this doc, it should default to "50% 50%"?
Relevant code (I think)
HTML
<svg class="container" fill="#f0c0c0" style="background: linear-gradient(to top, #ddfdff, #6dd5fa, #2980b9);
;" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<g id="green-balloon">
<path … />
<path … />
<text …>🕊</text>
</g>
<g id="red-balloon">
<path …/>
<path …/>
<text …>⚡️</text>
</g>
<line x1="0" y1="100" x2="200" y2="100" stroke="white" stroke-width=".5px"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="white" stroke-width=".5px" />
<defs>…</defs>
</svg>
JS
var redBalloon = $("#red-balloon");
var greenBalloon = $("#green-balloon");
var tl = new TimelineLite({onUpdate:updateSlider});
tl.set(greenBalloon, {x:100, y:200})
.set(redBalloon, {transformOrigin:"50% 50%", x:100,y:200})
.to(greenBalloon, 1, {scale:2, y:100})
.to(redBalloon, 1, {scale:2, y:100})
CSS
Not applicable.
Per OUSblake's answer on the GreenSock forums:
transformOrigin/svgOrigin affect scale, rotation, and skew. And svgOrigin uses the <svg> element's coordinate system. So svgOrigin: 50% 50% means everything is going to transform around 100,150 in the svg. transformOrigin: 50% 50% would be the center of the balloon. To center your element, use xPercent: -50 and yPercent: -50.
After providing a demo on Codepen, he continues:
It sounds like you were expecting transformOrigin to behave like in Adobe products, where changing the registration point causes the element to move. It doesn't, but that's what xPercent/yPercent are for. 😃
Just use those with a transformOrigin: 50% 50%, and everything should be pretty easy with curves.
He even went so far as to demonstrate motion along a path. Super helpful!
I have a three-part SVG. I would like to stretch the left and right parts infinitely, but keep the middle part intact.
Here’s the illustration.
I think my answer lies somewhere around viewbox tag preserveAspectRatio attribute of SVG. I haven't worked with them though, and could use a nudge in the right direction.
Here is the code for the unstretched SVG, which I think I need to somehow augment with viewboxes to achieve the desired stretching.
<svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="0.5" x2="32" y2="0.5" stroke="#FF0000"/>
<line x1="16" y1="8.5" x2="32" y2="8.5" stroke="#00FF00"/>
<line x1="16" y1="16.5" x2="48" y2="16.5" stroke="#0000FF"/>
</svg>
Here is the Codepen for code experiments: https://codepen.io/jaanus1/pen/aboQpeB
Set: width="100%" height="100%" preserveAspectRatio="none"
<svg width="100%" height="100%" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<line y1="0.5" x2="32" y2="0.5" stroke="#FF0000"/>
<line x1="16" y1="8.5" x2="32" y2="8.5" stroke="#00FF00"/>
<line x1="16" y1="16.5" x2="48" y2="16.5" stroke="#0000FF"/>
</svg>
Update
I tried to make a new option.
Two lines red and green are included in one SVG block which is scaled.
The green line enters another SVG block, which has a fixed size: width="48" height="17"
To keep all lines the same width when zooming in, I added the property vector-effect ="non-scaling-stroke"
.one {
position:relative;
}
.two {
position:absolute;
top:35%;
left:50%;
}
<div class="one">
<svg width="100%" height="5%" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<line vector-effect="non-scaling-stroke" y1="0.5" x2="32" y2="0.5" stroke="#FF0000"/>
<line vector-effect="non-scaling-stroke" x1="16" y1="16.5" x2="48" y2="16.5" stroke="#0000FF"/>
</svg>
<div class="two">
<svg width="48" height="17" viewBox="0 0 48 17">
<line x1="16" y1="8.5" x2="32" y2="8.5" stroke="#00FF00"/>
</svg>
</div>
</div>
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 a polyline attribute
<polyline points="229.7610294117647,200.44669117647058
293.93566176470586,148.9485294117647 325.6268382352941,95.8658088235294
374.74816176470586,124.38786764705881 389.00919117647055,218.6691176470588
346.22610294117646,305.02757352941177 263.8290441176471,311.3658088235294
232.1378676470588,215.5 " id="myCanvas_bg_obj_kpts0_43390" fill="none"
stroke-dasharray="5, 5" stroke-width="2" fill-opacity="0.5"></polyline>
The problem I am having is the dashed stroke is not showing up.
Could not find any resources on dashed stroke for polyline. What am i missing here or in my resource search. Please help me out on this.
Help much appreciated
Added as advised Robert Longson stroke="red"
The file is opened in the vector editor Inkscape
The image shows that the svg figure appears in the visibility zone, it needs to be shifted to the left and up.
This can be done in two ways:
add viewport, viewBox
and shift the image using the transformation command
transform="translate(-130 -50)"
<svg width="400" height="400" viewBox="0 0 400 400" >
<g transform="translate(-130 -50)">
<polyline points="229.7610294117647,200.44669117647058
293.93566176470586,148.9485294117647 325.6268382352941,95.8658088235294
374.74816176470586,124.38786764705881 389.00919117647055,218.6691176470588
346.22610294117646,305.02757352941177 263.8290441176471,311.3658088235294
232.1378676470588,215.5 " id="myCanvas_bg_obj_kpts0_43390" fill="none"
stroke-dasharray="5, 5" stroke-width="2" fill-opacity="0.5" stroke="red"></polyline>
</g>
</svg>
Instead of the translate transformation command, use the attributes x-min=130, y-min=50
viewBox="130 50 400 400"
<svg width="400" height="400" viewBox="130 50 400 400" >
<polyline points="229.7610294117647,200.44669117647058
293.93566176470586,148.9485294117647 325.6268382352941,95.8658088235294
374.74816176470586,124.38786764705881 389.00919117647055,218.6691176470588
346.22610294117646,305.02757352941177 263.8290441176471,311.3658088235294
232.1378676470588,215.5 " id="myCanvas_bg_obj_kpts0_43390" fill="none"
stroke-dasharray="5, 5" stroke-width="2" fill-opacity="0.5" stroke="red"></polyline>
</svg>
I need to draw red cirle with two curved string inside like that:
upper string always be 3 chars length
lower string can be from 1 to 20 chars length
UPDATE1:
I try to use textpath and circle tags, but I think I need to change some coordinates:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/>
<defs>
<path id="myTextPath"
d="M75,20
a1,1 0 0,0 150,0"
/>
</defs>
<text x="5" y="50" style="stroke: #000000;">
<textPath xlink:href="#myTextPath" >
string
</textPath>
</text>
</svg>
Also I didnt clear understand <path> 'd' atrribute , but I found out that I can change starting point to M10,20 but how I can change text curve orientation?
d="M10,20 a1,1 0 0,0 150,0"
To have text that "hangs" from a line nicely, the best way right now is to use a path with a smaller radius. There is an attribute to adjust the text's baseline, but that doesn't work reliably.
So you need two arcs. One for the bottom half of the circle, and one with a smaller radius for the top half. They also need to both start from the left. That means one will go clockwise, and the other will go anti-clockwise. You control that with the arc command's "sweep" flag.
We need to also use startOffset="50%" and text-anchor="middle" to centre the text on the paths.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 80 80">
<defs>
<path id="tophalf" d="M26,40 a14,14 0 0,1 28,0" />
<path id="lowerhalf" d="M16,40 a24,24 0 0,0 48,0" />
</defs>
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/>
<path d="M16,40 a24,24 0 0,0 48,0" style="stroke:#600; fill:none"/>
<text x="5" y="50" style="stroke: #000000;"
text-anchor="middle">
<textPath xlink:href="#tophalf" startOffset="50%">str</textPath>
</text>
<text x="5" y="50" style="stroke: #000000;"
text-anchor="middle">
<textPath xlink:href="#lowerhalf" startOffset="50%">second st</textPath>
</text>
</svg>
This works fine in FF, but unfortunately, it seems there are bugs in Chrome and IE right now that is causing the text to not be centred properly on those browsers.