I'm experiencing two different renderings of the same SVG path on two webkit browsers : Chrome and Safari.
Here is the markup :
<svg class="drillPath0" viewBox="0 0 775 310">
<path fill="transparent" stroke="#000" d="M 100 100 V 0"></path>
<path fill="transparent" stroke="#000" d="M 200 100 H 100"></path>
<path fill="transparent" stroke="#000" d="M 200 100 V 200"></path>
</svg>
On Chrome, it properly starts from the top of the SVG element.
On Safari, it has a 100px offset.
There is a jsFiddle ready if needed.
This happened to be a Safari bug, that has been fixed with the 7.0.1 update and iOS 8.
Related
When putting Hebrew text on an SVG textPath it is reversed only in Safari (macOS ventura 13.2 Safari 16.3). It is OK in Firefox and Chrome. Text that is NOT on a path is always OK. Furthermore, I am able to use bidi-override to reverse the text in Firefox/Chrome, but in Safari that did not un-reverse the reversed text as I expected (and even if it did that would not be a cross-browser solution). I also tried playing with various rtl/ltr css/html/svg dir/direction settings as well as lang/xml:lang he. I can of course reverse the text string in advance for Safari, but I am looking for a cross-browser solution.
This is a similar question, but the author is not addressing the browser-specific issue (I think at the time it was also broken in Chrome so he could just reverse the string in advance for both), and the accepted answer is not offering a concrete explanation nor is it helpful practically: RTL text (Hebrew) shows reversed when is on SVG path
Chrome:
Safari:
<html dir="rtl" lang="he">
<svg viewBox="0 0 1000 1000" width=500" xmlns="http://www.w3.org/2000/svg">
<path
id="MyPath1"
fill="none"
stroke="red"
d="M 500, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" />
<path
id="MyPath2"
fill="none"
stroke="green"
d="M 200, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" />
<text x='600' y='200'>
text not on path is ok טקסט רגיל
</text>
<text>
<textPath href="#MyPath1" text-anchor="end">hebrew textpath reversed only on safari טקסט על מסלול הפוך רק בספארי</x>
</text>
<text unicode-bidi="bidi-override" direction="ltr">
<textPath href="#MyPath2">טקסט על מסלול הפוך תמיד hebrew textpath always reversed</textPath>
</text>
</svg>
</html>
codepen: https://codepen.io/eyaler/pen/VwBBOXz?editors=1011
Got it! Since Safari is just ignoring all bidi stuff on textPath, that is, both the logical direction and the bidi-override, I can just reverse the string in advance AND do unicode-bidi="bidi-override" direction="ltr"! Double negatives to the rescue! This is a cross-browser solution.
<html dir="rtl" lang="he">
<svg viewBox="0 0 1000 1000" width=500" xmlns="http://www.w3.org/2000/svg">
<path
id="MyPath1"
fill="none"
stroke="red"
d="M 500, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" />
<path
id="MyPath2"
fill="none"
stroke="green"
d="M 200, 120 m 0, -110 a 110,110 0 0,1 0,320 a 110,110 0 0,1 0,-320" />
<text x='600' y='200'>
text not on path is ok טקסט רגיל
</text>
<text>
<textPath href="#MyPath1" text-anchor="end">hebrew textpath reversed only on safari טקסט על מסלול הפוך רק בספארי</x>
</text>
<text unicode-bidi="bidi-override" direction="ltr">
<textPath href="#MyPath2">רדסב גצומו רוקמב יתכפהש לולסמ לע טסקט hebrew textpath hardcoded reversed to display ok on all browsers</textPath>
</text>
</svg>
</html>
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>
I am trying to use SVGs as CSS background images, and have everything working except for importing external files with use.
Here is what I have:
CSS and HTML:
.shape1 {
background: url("shapes/shape1.svg") no-repeat;
}
<div class="shape1"></div>
Then the shapes/shape1.svg file:
<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
<path d="
M 10 10
l 0 180
" fill="none" stroke="#000" stroke-width="1px"/>
<use href="parts/part1.svg#build"/>
</svg>
It references the parts/part1.svg file, which contains this:
<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="build" d="
M 90 10
l 0 180
" fill="none" stroke="#000" stroke-width="1px"/>
</defs>
</svg>
However, when I render everything, it only displays one line, not two.
I've tried a few things. I've tried removing the defs and just loading directly, like this:
<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
<path d="
M 10 10
l 0 180
" fill="none" stroke="#000" stroke-width="1px"/>
<use href="parts/part1.svg"/>
</svg>
<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
<path d="
M 90 10
l 0 180
" fill="none" stroke="#000" stroke-width="1px"/>
</svg>
I've also tried messing with the file paths. My directory structure is this:
index.html
shapes/
shapes/shape1.svg
parts/
parts/part1.svg
I've tried ../parts/part1.svg, etc.. Also, I am running this directly from the filesystem, so the path is: file:///Users/me/Desktop/test/index.html. I am getting no errors in the web console. Any help would be appreciated!
I am on Chrome and only care about this working on Chrome for now.
When SVG is used as an image the SVG file must be self-contained for privacy reasons.
So shape1.svg cannot access anything outside itself. You'd have to embed part1.svg into shape1.svg.
Alternatively don't use SVG as a background image, embed it via an object or iframe tag or have it inline.
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 try to render a SVG polygon filled with pattern. SVG.path filled with pattern doesn't work. As you can see in this jsfiddle, filled background shows up transparent in Firefox and black in Chrome.
The example is based on leaflet GeoJSON Example and uses the diagonalHatch pattern described by carto.net.
<defs>
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" x="0" y="0" width="105" height="105">
<g style="fill:none; stroke:black; stroke-width:1">
<path d="M0 90 l15,15"/><path d="M0 75 l30,30"/>
<path d="M0 60 l45,45"/><path d="M0 45 l60,60"/>
<path d="M0 30 l75,75"/><path d="M0 15 l90,90"/>
<path d="M0 0 l105,105"/><path d="M15 0 l90,90"/>
<path d="M30 0 l75,75"/><path d="M45 0 l60,60"/>
<path d="M60 0 l45,45"/><path d="M75 0 l30,30"/>
<path d="M90 0 l15,15"/>
</g>
</pattern>
</defs>
As this jsfiddle shows, copying the SVG polygons below the map, makes it work on Chrome but not on Firefox. Apply a fill pattern adding this style to SVG.path:
style="fill: url(#diagonalHatch)"
I'm really not sure if this is a bug in leaflet or some conflict with SVG implementation on Firefox and Chrome.
I've wrote a leaflet plugin for this, you may try it,
https://github.com/lnaweisu/leaflet-polygon-fillPattern
Maybe you can try setting the path via the shape's attribute as mentioned in this thread: Leaflet polygon with fuzzy outline
// Set filter attribute on the polygon
polygon._path.setAttribute('filter', 'url(#blur)');