I have a series of opaque svg paths that overlap eachother. I want to create a mask based on each shape's previous sibling to mask the overlap.
My problem is that in a case where I have to shapes (fiddle below) the mask based on shape 0 completely removes shape 1
I'm a bit new at SVG, but it was my understanding that the mask "punches a hole" in its coordinates when applied. I expected the mask to remove anything in shape 1 that shares coordinates with shape 0, not completely hiding it. What am I doing wrong?
https://jsfiddle.net/nazhgvL6/3/
<svg pointer-events="none" width="1558" height="1163" viewBox="-130 -97 1558 1163" style="transform: translate3d(-330px, -497px, 0px) scale(1);">
<defs>
<!-- #mask-shape-1 d attribute is the same as the d attribute of the shape 0 path-->
<mask id="mask-shape-1"> <!-- rename ID to turn mask on/off -->
<path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" fill="white"></path>
<path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" rx="5" fill="black"></path>"
</mask>
</defs>
<g>
<!-- shape 0 -->
<path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" mask="url(#mask-shape-0)"></path>
<!-- shape 1 -->
<path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M562 849L522 810L495 770L485 749L482 738L483 715L489 693L498 671L504 661L541 613L573 588L599 576L614 572L643 575L657 578L684 588L697 595L709 603L731 622L749 644L756 656L768 683L772 696L777 731L779 760z" mask="url(#mask-shape-1)"></path>
</g>
</svg>
I have SVG file with one path and 2 lines in d attribute. It have valid fill and look like this
You can view source of this svg file here img1.svg
I change one line of this svg, I make symbol bold. After changes it look like this
it have a wrong fill.
You can view source of this svg file here img2.svg
What is the reason of invalid fill of second file?
In order that the inner circle is not stained, you need to write fill-rule="evenodd"
More details W3C
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1362.71301" height="300">
<g fill="#ffff00" fill-rule="evenodd" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g><path d="
M77.71,95.66
c-2.96667,0 -5.29,-1.83333 -6.97,-5.5
c-1.64,-3.67333 -2.46,-8.75333 -2.46,-15.24
c0,-3.90667 0.31333,-8.71 0.94,-14.41
c0.78,-7.38667 1.93333,-14.08667 3.46,-20.1
c4.29333,-17.07333 10.52333,-25.61 18.69,-25.61
c2.96667,0 5.27,1.83667 6.91,5.51
c1.68,3.63333 2.52,8.69333 2.52,15.18
c0,3.94667 -0.31333,8.77 -0.94,14.47
c-0.82,7.38667 -1.97,14.08667 -3.45,20.1
c-4.3,17.06667 -10.53333,25.6 -18.7,25.6z
M111.52099,8.30178
c2.06115,1.73429 3.75889,3.86645 5.10023,6.37052
c3.04871,5.64268 4.45878,24.3877 4.45878,24.3877
c0,16.53189 -3.37894,31.27394 -10.19147,44.17397
l-0.00092,0.00173
c-3.89891,7.36538 -8.6741,13.15159 -14.36187,17.27221
c-2.74934,2.00414 -5.66985,3.58411 -8.75938,4.73219
c-4.08503,1.518 -13.03637,2.26991 -13.03637,2.26991
c-7.00914,0 -12.81163,-1.73054 -17.18095,-5.41104
c-2.05687,-1.73261 -3.75131,-3.86164 -5.09027,-6.36127
c-3.04829,-5.64187 -4.45878,-24.3277 -4.45878,-24.3277
c0,-16.571 3.37858,-31.33325 10.19147,-44.23397l0.00309,-0.00584
c3.89784,-7.32217 8.64929,-13.10249 14.28863,-17.26001l0.01363,-0.00996
c2.82017,-2.04262 5.81485,-3.64444 8.98181,-4.79736
c4.04607,-1.47296 8.3447,-2.20287 12.88137,-2.20287
c6.99886,0 12.79443,1.72768 17.16099,5.40178z" id="letter"></path></g>
</g></svg>
I have an SVG image which I am trying to display in an HTML page. When this is displayed in Safari, the text overlaps with each other as seen below:
When I display this svg in Chrome, the text appears better. You can see the 'One Center' text is not overlapped.
The SVG code for these 4 lines is as below:
Here is the markup:
<svg:g xmlns:svg="http://www.w3.org/2000/svg" transform="">
<svg:text transform=" scale(1, -1)" xml:space="preserve">
<svg:tspan font-family="Helvetica" font-size="8px" y="-712.4" x="22.7 24.924 30.724 35.628 42.732 47.18 51.628 56.076 58.724 60.948 66.748 71.196 76.1 78.3 82.748 84.972 90.772 95.676 102.78 109.884 114.788 119.692 121.892 126.34 130.788 133.436 135.636 140.54 145.444 149.892" font-weight="bold" fill="rgb(0,0,0)">
ABC DEF JHK
</svg:tspan>
</svg:text>
<svg:g xmlns:svg="http://www.w3.org/2000/svg" transform="">
<svg:text transform=" scale(1, -1)" xml:space="preserve">
<svg:tspan font-family="Helvetica" font-size="8px" y="-712.4" x="152 158.648 163.096 168 172.448 177.352 181.8 188.904 193.352 198.256 200.904 203.128 208.032 212.936" font-weight="bold" fill="rgb(0,0,0)">
Management LLC
</svg:tspan>
</svg:text>
<svg:g xmlns:svg="http://www.w3.org/2000/svg" transform="">
<svg:text transform=" scale(1, -1)" xml:space="preserve">
<svg:tspan font-family="Helvetica" font-size="8px" y="-703.4" x="22.7 24.924 31.124 36.028 40.476 42.7 48.5 53.404 60.508 64.956 69.404 73.852 76.5 78.724 84.524 88.972 93.876 96.524 100.972" font-weight="bold" fill="rgb(0,0,0)">
One Center
</svg:tspan>
</svg:text>
Any ideas on why Safari would render it badly compared to Chrome and if anything can be done to correct this?
probably super easy question, but I have no idea how to use svgs. We have got the code:
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="#000000" id="Group" transform="translate(-48.000000, -432.000000)"><path d="M54.8796844,443.0591 L54.8796844,445 L57.2307692,445 L57.2307692,443.0591 Z M56,448 C51.5817218,448 48,444.418278 48,440 C48,435.581722 51.5817218,432 56,432 C60.4182782,432 64,435.581722 64,440 C64,444.418278 60.4182782,448 56,448 Z M53.5700197,435.51041 C52.5864514,436.043208 52.0631167,436.947609 52,438.22364 L54.2800789,438.22364 C54.2800789,437.852024 54.4076253,437.493845 54.6627219,437.149093 C54.9178185,436.804341 55.3504243,436.631968 55.9605523,436.631968 C56.5811997,436.631968 57.0085458,436.771881 57.2426036,437.051713 C57.4766613,437.331544 57.5936884,437.641592 57.5936884,437.981867 C57.5936884,438.277369 57.4884955,438.548241 57.2781065,438.794493 L56.8205128,439.190732 L56.2445759,439.573539 C55.6765258,439.949633 55.3241295,440.282067 55.1873767,440.570853 C55.0506239,440.859639 54.9664696,441.382356 54.9349112,442.139019 L57.0650888,442.139019 C57.0703485,441.780835 57.1045362,441.516679 57.1676529,441.346541 C57.2675876,441.077903 57.4700839,440.842849 57.7751479,440.64137 L58.3353057,440.271995 C58.9033559,439.895901 59.28731,439.586972 59.4871795,439.345198 C59.8290615,438.946718 60,438.456461 60,437.874412 C60,436.925225 59.6068415,436.208867 58.8205128,435.725319 C58.0341841,435.241771 57.0466858,435 55.8579882,435 C54.9533157,435 54.1906671,435.170135 53.5700197,435.51041 Z M53.5700197,435.51041" id="Oval 318"/></g></g></svg>
which gives us a question mark. But how can I fill with color the actual question mark, not only the black circle ?
The <path> element provides you with a black circle containing a cut-out question mark. To fill the question mark, just put it on top of a circle with the required fill colour.
I've fixed your coordinates a bit in the following example:
<svg viewBox="0 0 16 16">
<circle r="7" fill="#ff0" transform="translate(8,8)" />
<path d="M6.88,11.059 L6.88,13 L9.231,13 L9.231,11.059 Z M8,16 C3.582,16 0,12.418
0,8 C0,3.582 3.582,0 8,0 C12.418,0 16,3.582 16,8 C16,12.418 12.418,16 8,16
Z M5.57,3.51 C4.586,4.043 4.063,4.948 4,6.224 L6.28,6.224 C6.28,5.852
6.408,5.494 6.663,5.149 C6.918,4.804 7.35,4.632 7.961,4.632 C8.581,4.632
9.009,4.772 9.243,5.052 C9.477,5.332 9.594,5.642 9.594,5.982 C9.594,6.277
9.488,6.548 9.278,6.794 L8.821,7.191 L8.245,7.574 C7.677,7.95 7.324,8.282
7.187,8.571 C7.051,8.86 6.966,9.382 6.935,10.139 L9.065,10.139 C9.07,9.781
9.105,9.517 9.168,9.347 C9.268,9.078 9.47,8.843 9.775,8.641 L10.335,8.272
C10.903,7.896 11.287,7.587 11.487,7.345 C11.829,6.947 12,6.456 12,5.874
C12,4.925 11.607,4.209 10.821,3.725 C10.034,3.242 9.047,3 7.858,3 C6.953,3
6.191,3.17 5.57,3.51 Z M5.57,3.513" fill="#000" fill-rule="evenodd" />
</svg>
I try to use below steps to get a SVG file but it seems the output SVG file not displayed correctly.
Use latex to compile latex code test.tex to dvi file.
\documentclass{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
\def\r{2cm}
\node (O) at (0,0) {$O$};
\draw (0,0) circle (\r);
\draw[->] (-\r,0)--(\r,0);
\draw[->] (0,-\r)--(0,\r);
\end{tikzpicture}
\end{document}
Compile to dvi (test.dvi) with below command line:
# latex test.tex
use dvisvgm tool to convert dvi file to SVG (test.svg).
# dvisvgm --no-fonts test.dvi
The SVG file seems created successfully but it only display a O character in Chrome Browser or Firefox.
So I guess the SVG file maybe something wrong.
The SVG file content as below:
<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- This file was generated by dvisvgm 1.2.2 (x86_64-apple-darwin10.8.0) -->
<!-- Sat Nov 30 21:38:15 2013 -->
<svg height='6.8078pt' version='1.1' viewBox='-15.1079 -21.9156 7.87601 6.8078' width='7.87601pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M7.4 -4.36C7.4 -5.97 6.34 -7.05 4.85 -7.05C2.69 -7.05 0.49 -4.78 0.49 -2.45C0.49 -0.79 1.61 0.22 3.05 0.22C5.17 0.22 7.4 -1.97 7.4 -4.36ZM3.11 -0.04C2.12 -0.04 1.42 -0.85 1.42 -2.17C1.42 -2.61 1.56 -4.07 2.33 -5.24C3.02 -6.28 4 -6.8 4.79 -6.8C5.61 -6.8 6.51 -6.24 6.51 -4.75C6.51 -4.03 6.24 -2.47 5.25 -1.24C4.77 -0.63 3.95 -0.04 3.11 -0.04Z' id='g0-79'/>
</defs>
<g id='page1' transform='matrix(0.996264 0 0 0.996264 0 0)'>
<use x='-15.1645' xlink:href='#g0-79' y='-15.1645'/>
</g>
</svg>
Anything wrong with dvisvgm command?
You probably ran dvisvgm with deactivated PostScript support. You can find further information on how to check this on the dvisvgm FAQ page. With activated PS support, I get the correct result:
<?xml version='1.0'?>
<!-- This file was generated by dvisvgm 1.5.1 (x86_64-pc-win64) -->
<!-- Sun Dec 01 20:59:37 2013 -->
<svg height='113.785pt' version='1.1' viewBox='-72 -72 113.785 113.785' width='113.785pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M7.4 -4.36C7.4 -5.97 6.34 -7.05 4.85 -7.05C2.69 -7.05 0.49 -4.78 0.49 -2.45C0.49 -0.79 1.61 0.22 3.05 0.22C5.17 0.22 7.4 -1.97 7.4 -4.36ZM3.11 -0.04C2.12 -0.04 1.42 -0.85 1.42 -2.17C1.42 -2.61 1.56 -4.07 2.33 -5.24C3.02 -6.28 4 -6.8 4.79 -6.8C5.61 -6.8 6.51 -6.24 6.51 -4.75C6.51 -4.03 6.24 -2.47 5.25 -1.24C4.77 -0.63 3.95 -0.04 3.11 -0.04Z' id='g0-79'/>
</defs>
<g id='page1' transform='matrix(0.996264 0 0 0.996264 0 0)'>
<g transform='matrix(1 0 0 1 -3.938 3.4039)'>
<use x='-15.1645' xlink:href='#g0-79' y='-15.1645'/>
</g>
<path d='M41.7418 -15.166C41.7418 -46.5921 16.2639 -72.0701 -15.166 -72.0701C-46.5921 -72.0701 -72.0701 -46.5921 -72.0701 -15.166C-72.0701 16.2639 -46.5921 41.7418 -15.166 41.7418C16.2639 41.7418 41.7418 16.2639 41.7418 -15.166ZM-15.166 -15.166' fill='none' stroke='#000000' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M-72.0701 -15.166H41.2831' fill='none' stroke='#000000' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M40.0834 -16.7658C40.1814 -16.1659 41.2832 -15.2641 41.5812 -15.166C41.2832 -15.0641 40.1814 -14.1662 40.0834 -13.5663' fill='none' stroke='#000000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319985'/>
<path d='M-15.166 41.7418V-71.6113' fill='none' stroke='#000000' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M-16.7658 -70.4115C-16.1659 -70.5096 -15.2641 -71.6113 -15.166 -71.9093C-15.0641 -71.6113 -14.1662 -70.5096 -13.5663 -70.4115' fill='none' stroke='#000000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319985'/>
</g>
</svg>
The SVG looks fine. It has only one graphical element in it (the path) and it gets drawn correctly by the browser(s).
So that would suggest that there is something wrong with your latex file or the conversion tool. I don't know latex well enough, so I can't help with that.
Oh,that means I didn't install Ghostscript tool in my MAC.
I try to install ghostscript to MAC with below command:
# sudo port install ghostscript
The install seems work fine but it seems only /usr/local/gs file created, no share library at all.
Then I try to check dvisvgm libgs settings:
# dvisvgm -h |grep libgs
--libgs=filename set name of Ghostscript shared library
# dvisvgm -l |grep gs
Notes:Nothing output for this command.
That means I need to use a --libgs=filename option to specify the share library.
Does that means dvisvgm tool can not work in MAC?
I have tried to compile ghostscript from source on MAC but compile failure.
Then I try to use MAC version gs to convert pdf to SVG, it seems segment fault:
# gs -dBATCH -dSAFER -dNOPAUSE -sDEVICE=svg -sOutputFile=test.Svg test.pdf
....
Segmentation fault: 11
And inkscape seems works fine with below command:
inkscape test.pdf --export-plain-svg=test.svg
inkscape really do good job on MAC bit a bit time consuming.