Dashed SVG line with non-dashed marker in Safari - svg

I want a dashed line with a non-dashed arrow head, but in Safari the dashiness is apparently also applied on the markers.
Demo:
<svg width="100%" height="100%">
<defs>
<marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
<path transform="scale(-0.4) translate(-3,0)" style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1pt;stroke-opacity:1" d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "></path>
</marker>
</defs>
<line class="line" stroke-dasharray="5,5" x1="20" y1="20" x2="80" y2="80" marker-start="url(#myMarker)" stroke-width="10" stroke="black"></line>
</svg>
How it looks like in Firefox (and Chrome), that's how I want it to be:
How it looks like in Safari (12.0 and the current Technology Preview):
Setting stroke-dasharray to 0 or an empty string for the <path> of the marker does not seem to have any effect at all. Setting it to 1 0 (which smells like a hack) does nearly perfect, but the arrow head's tip is not pointy:
How to best override this behaviour of Safari and get a dashed line with non-dashed arrow head with a pointy tip? Is there something I am missing why Safari is behaving this way or is this simply a bug?


I've rewritten the path for the marker. Now it begins in the middle of the side instead of the vertex. Also I'm using stroke-dasharray="30,0"where 30 is the length of the path for the marker.
<svg width="100%" height="100%">
<defs>
<marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
<path transform="scale(-0.4) translate(-3,0)" style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1pt;stroke-opacity:1" d="M-2.88,0L-2.88,5L 5.77,0L -2.88,-5L-2.88,0z" stroke-dasharray="30,0"></path>
</marker>
</defs>
<line class="line" stroke-dasharray="5,5" x1="20" y1="20" x2="80" y2="80" marker-start="url(#myMarker)" stroke-width="10" stroke="black"></line>
</svg>

Related

How to make SVG stroke-width consistent across the entire path?

Here is an example:
<svg width="60" height="30">
<path stroke="red" stroke-width="1" fill="none" d="M0 25 L10 25 L45 5 L55 5"/>
</svg>
I find that the inclined line segment has a thinner stroke-width then the horizontal lines. How do I make the stroke-width consistent across the entire path?
Breaking the path into multiple paths did not help as the line joins are not elegant. The points are generated dynamically so the solution needs to be generic.

<svg width="180" height="120">
<g stroke="red" fill="none">
<g stroke-width="1">
<path id="p" d="M0 25l10 0l35-20l10 0" />
<use href="#p" y="25" shape-rendering="optimizeQuality"/>
<use href="#p" y="50" shape-rendering="crispEdges"/>
</g>
<use href="#p" stroke-width="2" x="60"/>
<use href="#p" stroke-width="3" x="120"/>
</g>
</svg>
I added stroke-width 2 and 3 to your example. The effect is less because more pixels are being used to draw the line.
At 1 pixel your monitor and Browser can't make much of it. Only add (some) anti-aliasing.
screenshot zoomed:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering won't help
because it is still your monitor/browser only having 1 pixel to draw that line
Same for CSS https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering..
it is still 1 pixel
Same for setting style="transform:translateZ(0)"
Maybe in the future with Quantum Dot display technology it will look better. https://en.wikipedia.org/wiki/Next_generation_of_display_technology

How to merge two svg flile

I have two files(svg) from get font-awesome
1 Icon search
https://fontawesome.com/icons/search?style=solid
2 Icon desktop
https://fontawesome.com/icons/desktop?style=solid
I would like to get finish result like
I'm sorry, I can't use Adobe Illustrator
Thank you in advance your diligence

Im putting both paths (the computer #cp and the magnifying glass) in the same svg element. Please note that the magnifying glass is a symbol and has it's own viewBox attribute. This will allow me to resize it and position it as needed by using a <use> element with a position (x, y) and a size (width):
<use xlink:href="#mg" fill="red" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" />
I hope you'll find this useful:
<svg viewBox="0 0 700 540" >
<defs>
<symbol viewBox="-20 0 500 438" id="mg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.686,317.613c-44.246,32.716-92.632,44.711-145.867,34.022
c-44.507-8.937-80.279-32.364-107.23-68.768C-17.896,211.978-9.703,111.877,52.721,50.913
c65.372-63.843,167.875-67.842,237.902-10.879c64.849,52.75,93.084,159.289,27.631,247.105c4.34,0,8.222,0.143,12.089-0.031
c6.949-0.312,12.7,2.262,17.505,7.059c27.479,27.436,54.99,54.837,82.342,82.398c10.109,10.187,9.872,21.971-0.188,32.144
c-7.265,7.347-14.526,14.699-21.934,21.901c-9.676,9.407-20.949,9.446-30.493-0.055c-27.99-27.865-55.854-55.857-83.824-83.743
c-5.25-5.234-6.842-11.599-6.585-18.683C287.279,324.973,287.475,321.819,287.686,317.613z
M68.576,177.429c-0.658-58.105,47.084-109.266,109.23-109.212
c60.523,0.052,109.069,48.696,109.216,109.302c0.145,60.339-48.154,109.597-109.557,109.436
C115.029,286.791,67.692,235.734,68.576,177.429z"/>
</symbol>
</defs>
<g id="cp">
<path fill-rule="evenodd" d="M355.128,397.23c4.431,13.312,8.741,26.191,12.992,39.09
c0.933,2.829,3.232,1.861,5.027,1.868c19.163,0.074,38.327-0.067,57.488,0.113c11.443,0.107,20.518,9.763,20.256,21.033
c-0.233,10.074-8.367,18.81-18.422,19.729c-1.655,0.151-3.329,0.136-4.994,0.136c-75.652,0.009-151.304-0.029-226.955,0.067
c-8.242,0.011-15.168-2.292-19.817-9.298c-4.163-6.274-4.849-13.108-1.293-19.912c3.73-7.136,9.618-11.604,17.847-11.695
c18.994-0.211,37.993-0.229,56.985,0.009c4.068,0.051,5.775-1.184,6.953-5.021c3.267-10.639,6.842-21.191,10.627-31.657
c1.416-3.917,0.533-4.573-3.4-4.564c-52.822,0.118-105.646,0.12-158.468,0.051c-18.57-0.024-32.642-9.713-39.553-26.76
c-2.249-5.548-2.435-11.332-2.434-17.184c0.015-49.49,0.002-98.98,0.003-148.47c0.001-40.492-0.057-80.984,0.044-121.476
c0.046-18.598,10.123-32.75,27.482-39.483c5.455-2.116,11.1-2.012,16.745-2.013c94.647-0.024,189.296-0.016,283.943-0.012
c40.658,0.002,81.319,0.241,121.975-0.085c18.796-0.151,33.316,10.927,39.614,26.602c2.225,5.539,2.468,11.321,2.466,17.178
c-0.024,58.322-0.019,116.644-0.019,174.965c-0.001,30.827-0.705,61.676,0.232,92.475c0.729,23.897-17.471,44.839-44.371,44.501
c-51.481-0.646-102.977-0.188-154.466-0.187C359.634,397.23,357.65,397.23,355.128,397.23z
M314.081,96.229c61.994,0,123.988,0.045,185.981-0.096
c4.433-0.01,5.834,0.936,5.824,5.659c-0.16,78.492-0.163,156.984,0.005,235.477c0.01,4.762-1.452,5.607-5.818,5.604
c-123.987-0.112-247.976-0.114-371.963-0.003c-4.371,0.004-5.832-0.848-5.821-5.604c0.166-78.491,0.163-156.984,0.006-235.476
c-0.009-4.686,1.333-5.693,5.805-5.683c61.994,0.145,123.988,0.098,185.981,0.098C314.081,96.212,314.081,96.22,314.081,96.229z"/>
</g>
<use xlink:href="#mg" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" />
</svg>

Add svg icon in the middle of an svg curved line

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.

SVG absolute line marker size

I've got a bunch of SVGs representing a trip using a polyline.
I'm using non-scaling-stroke vector effect to make sure that each of the polylines is rendered with an absolute width. So when the viewBox's dimension changes, the width of the polyline does not.
At the ends of the mentioned polylines, I wanted to put markers. I would like to have the markers absolutely sized as well. I thought this should be easy by setting the marker units to strokeWidth.
In contrast to what happens with the stroke of the polyline, the size of the markers at the end of a polyline, does change along with the size of the viewBox.
Below I've included an example in where I used simple circles for markers.
<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="131890.80533333332 85178.93015415945 198.25991111111944 205.10300513348193">
<defs>
<marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
<marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
</defs>
<g>
<polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132089.06524444444, 85384.03315929293 131890.80533333332, 85178.93015415945">
</polyline>
</g>
</svg>
<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="132038.56071111112 85364.68902323228 50.557866666669725 19.330493533576373">
<defs>
<marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
<marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
</defs>
<g>
<polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132038.56071111112, 85364.68902323228 132089.1185777778, 85384.01951676585">
</polyline>
</g>
</svg>
See also: https://jsfiddle.net/u4bmupza/3/
Am I missing some SVG attributes or should I calculate the size of the markers manually?

vector-effect="non-scaling-stroke was first introduced in SVG 1.2 Tiny. That was a subset of SVG intended for for mobile devices with limited power. SVG 1.2 didn't have markers, so this issue wasn't a problem.
vector-effect was about the only thing from SVG 1.2 Tiny that browsers ended up implementing. Unfortunately, this problem was obviously missed at that time, and I guess no one has bothered to report it as a bug. Though I've seen it asked about on S.O. previously.
The good news is that the SVG2 spec specifically notes it as something that should be addressed, though that doesn't help you now.

svg draw circle with curved text inside

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.

Resources