SVG rounded stroke not working properly - svg
Rounded corner is not working properly in my SVG.
Please check following code,
<svg height="100" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: -0.75px; top: -0.398438px;" viewBox="0 24.61111068725586 473.6666666666667 77.38888549804688" preserveAspectRatio="xMidYMid meet"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="#000000" stroke="#ee0f0f" d="M10.305555555555555,27.41666666666667C10.305555555555555,27.41666666666667,10.305555555555555,-24.888888888888886,10.305555555555555,-24.888888888888886C10.305555555555555,-24.888888888888886,1.166666666666666,-24.888888888888886,1.166666666666666,-24.888888888888886C1.166666666666666,-24.888888888888886,1.166666666666666,-34.02777777777777,1.166666666666666,-34.02777777777777C1.166666666666666,-34.02777777777777,31.5,-34.02777777777777,31.5,-34.02777777777777C31.5,-34.02777777777777,31.5,-24.888888888888886,31.5,-24.888888888888886C31.5,-24.888888888888886,22.75,-24.888888888888886,22.75,-24.888888888888886C22.75,-24.888888888888886,22.75,27.41666666666667,22.75,27.41666666666667C22.75,27.41666666666667,10.305555555555555,27.41666666666667,10.305555555555555,27.41666666666667C10.305555555555555,27.41666666666667,10.305555555555555,27.41666666666667,10.305555555555555,27.41666666666667" transform="matrix(1,0,0,1,-0.0047,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M46.47222222222222,27.41666666666667C46.47222222222222,27.41666666666667,46.47222222222222,-34.02777777777777,46.47222222222222,-34.02777777777777C46.47222222222222,-34.02777777777777,72.13888888888889,-34.02777777777777,72.13888888888889,-34.02777777777777C72.13888888888889,-34.02777777777777,72.13888888888889,-25.47222222222222,72.13888888888889,-25.47222222222222C72.13888888888889,-25.47222222222222,58.91666666666667,-25.47222222222222,58.91666666666667,-25.47222222222222C58.91666666666667,-25.47222222222222,58.91666666666667,-8.749999999999993,58.91666666666667,-8.749999999999993C58.91666666666667,-8.749999999999993,68.25,-8.749999999999993,68.25,-8.749999999999993C68.25,-8.749999999999993,68.25,3.552713678800501e-15,68.25,3.552713678800501e-15C68.25,3.552713678800501e-15,58.91666666666667,3.552713678800501e-15,58.91666666666667,3.552713678800501e-15C58.91666666666667,3.552713678800501e-15,58.91666666666667,18.861111111111114,58.91666666666667,18.861111111111114C58.91666666666667,18.861111111111114,72.13888888888889,18.861111111111114,72.13888888888889,18.861111111111114C72.13888888888889,18.861111111111114,72.13888888888889,27.41666666666667,72.13888888888889,27.41666666666667C72.13888888888889,27.41666666666667,46.47222222222222,27.41666666666667,46.47222222222222,27.41666666666667C46.47222222222222,27.41666666666667,46.47222222222222,27.41666666666667,46.47222222222222,27.41666666666667" transform="matrix(1,0,0,1,-0.0009,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M103.58333333333333,28.58333333333334C82.97222222222221,28.97222222222223,85.5,6.805555555555561,85.69444444444444,-13.416666666666664C85.69444444444444,-27.999999999999993,91.72222222222221,-35.388888888888886,103.58333333333333,-35.388888888888886C117.58333333333333,-35.388888888888886,121.66666666666666,-24.888888888888886,120.69444444444443,-9.527777777777771C120.69444444444443,-9.527777777777771,108.44444444444444,-9.527777777777771,108.44444444444444,-9.527777777777771C108.05555555555554,-16.138888888888886,110,-25.666666666666664,103.58333333333333,-25.666666666666664C99.88888888888889,-25.666666666666664,98.13888888888889,-22.55555555555555,98.13888888888889,-16.52777777777777C98.13888888888889,-16.52777777777777,98.13888888888889,9.916666666666671,98.13888888888889,9.916666666666671C98.13888888888889,15.944444444444448,99.88888888888889,19.05555555555556,103.58333333333333,19.05555555555556C110,19.05555555555556,108.44444444444444,9.138888888888893,108.63888888888889,2.138888888888893C108.63888888888889,2.138888888888893,120.69444444444443,2.138888888888893,120.69444444444443,2.138888888888893C121.27777777777777,17.111111111111114,117.77777777777777,28.19444444444445,103.58333333333333,28.58333333333334C103.58333333333333,28.58333333333334,103.58333333333333,28.58333333333334,103.58333333333333,28.58333333333334" transform="matrix(1,0,0,1,-0.007,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M136.47222222222223,27.41666666666667C136.47222222222223,27.41666666666667,136.47222222222223,-34.02777777777777,136.47222222222223,-34.02777777777777C136.47222222222223,-34.02777777777777,148.91666666666666,-34.02777777777777,148.91666666666666,-34.02777777777777C148.91666666666666,-34.02777777777777,148.91666666666666,-8.944444444444443,148.91666666666666,-8.944444444444443C148.91666666666666,-8.944444444444443,157.86111111111111,-8.944444444444443,157.86111111111111,-8.944444444444443C157.86111111111111,-8.944444444444443,157.86111111111111,-34.02777777777777,157.86111111111111,-34.02777777777777C157.86111111111111,-34.02777777777777,170.30555555555554,-34.02777777777777,170.30555555555554,-34.02777777777777C170.30555555555554,-34.02777777777777,170.30555555555554,27.41666666666667,170.30555555555554,27.41666666666667C170.30555555555554,27.41666666666667,157.86111111111111,27.41666666666667,157.86111111111111,27.41666666666667C157.86111111111111,27.41666666666667,157.86111111111111,3.552713678800501e-15,157.86111111111111,3.552713678800501e-15C157.86111111111111,3.552713678800501e-15,148.91666666666666,3.552713678800501e-15,148.91666666666666,3.552713678800501e-15C148.91666666666666,3.552713678800501e-15,148.91666666666666,27.41666666666667,148.91666666666666,27.41666666666667C148.91666666666666,27.41666666666667,136.47222222222223,27.41666666666667,136.47222222222223,27.41666666666667C136.47222222222223,27.41666666666667,136.47222222222223,27.41666666666667,136.47222222222223,27.41666666666667" transform="matrix(1,0,0,1,0.0008,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M186.47222222222223,27.41666666666667C186.47222222222223,27.41666666666667,186.47222222222223,-34.22222222222222,186.47222222222223,-34.22222222222222C186.47222222222223,-34.22222222222222,195.41666666666666,-34.22222222222222,195.41666666666666,-34.22222222222222C195.41666666666666,-34.22222222222222,208.83333333333331,-1.9444444444444393,208.83333333333331,-1.9444444444444393C208.83333333333331,-1.9444444444444393,208.83333333333331,-34.22222222222222,208.83333333333331,-34.22222222222222C208.83333333333331,-34.22222222222222,219.13888888888889,-34.22222222222222,219.13888888888889,-34.22222222222222C219.13888888888889,-34.22222222222222,219.13888888888889,27.41666666666667,219.13888888888889,27.41666666666667C219.13888888888889,27.41666666666667,210.58333333333331,27.41666666666667,210.58333333333331,27.41666666666667C210.58333333333331,27.41666666666667,197.16666666666666,-6.80555555555555,197.16666666666666,-6.80555555555555C197.16666666666666,-6.80555555555555,197.16666666666666,27.41666666666667,197.16666666666666,27.41666666666667C197.16666666666666,27.41666666666667,186.47222222222223,27.41666666666667,186.47222222222223,27.41666666666667C186.47222222222223,27.41666666666667,186.47222222222223,27.41666666666667,186.47222222222223,27.41666666666667" transform="matrix(1,0,0,1,0.0059,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M253.58333333333337,28.58333333333334C232.97222222222226,28.58333333333334,235.50000000000003,6.611111111111114,235.69444444444446,-13.416666666666664C235.69444444444446,-27.999999999999993,241.5277777777778,-35.388888888888886,253.58333333333337,-35.388888888888886C265.6388888888889,-35.388888888888886,271.6666666666667,-27.999999999999993,271.6666666666667,-13.416666666666664C271.86111111111114,6.805555555555561,274.19444444444446,28.58333333333334,253.58333333333337,28.58333333333334C253.58333333333337,28.58333333333334,253.58333333333337,28.58333333333334,253.58333333333337,28.58333333333334M253.58333333333337,-25.666666666666664C248.91666666666669,-25.47222222222222,248.1388888888889,-21.194444444444443,248.1388888888889,-16.52777777777777C248.1388888888889,-16.52777777777777,248.1388888888889,9.916666666666671,248.1388888888889,9.916666666666671C248.1388888888889,15.944444444444448,249.8888888888889,19.05555555555556,253.58333333333337,19.05555555555556C257.2777777777778,19.05555555555556,259.22222222222223,15.944444444444448,259.22222222222223,9.916666666666671C259.22222222222223,9.916666666666671,259.22222222222223,-16.52777777777777,259.22222222222223,-16.52777777777777C259.22222222222223,-22.55555555555555,257.2777777777778,-25.666666666666664,253.58333333333337,-25.666666666666664C253.58333333333337,-25.666666666666664,253.58333333333337,-25.666666666666664,253.58333333333337,-25.666666666666664" transform="matrix(1,0,0,1,-0.0023,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M286.47222222222223,27.41666666666667C286.47222222222223,27.41666666666667,286.47222222222223,-34.02777777777777,286.47222222222223,-34.02777777777777C286.47222222222223,-34.02777777777777,298.9166666666667,-34.02777777777777,298.9166666666667,-34.02777777777777C298.9166666666667,-34.02777777777777,298.9166666666667,18.861111111111114,298.9166666666667,18.861111111111114C298.9166666666667,18.861111111111114,311.1666666666667,18.861111111111114,311.1666666666667,18.861111111111114C311.1666666666667,18.861111111111114,311.1666666666667,27.41666666666667,311.1666666666667,27.41666666666667C311.1666666666667,27.41666666666667,286.47222222222223,27.41666666666667,286.47222222222223,27.41666666666667C286.47222222222223,27.41666666666667,286.47222222222223,27.41666666666667,286.47222222222223,27.41666666666667" transform="matrix(1,0,0,1,-0.0071,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M343.5833333333333,28.58333333333334C322.97222222222223,28.58333333333334,325.5,6.611111111111114,325.69444444444446,-13.416666666666664C325.69444444444446,-27.999999999999993,331.52777777777777,-35.388888888888886,343.5833333333333,-35.388888888888886C355.6388888888889,-35.388888888888886,361.6666666666667,-27.999999999999993,361.6666666666667,-13.416666666666664C361.8611111111111,6.805555555555561,364.19444444444446,28.58333333333334,343.5833333333333,28.58333333333334C343.5833333333333,28.58333333333334,343.5833333333333,28.58333333333334,343.5833333333333,28.58333333333334M343.5833333333333,-25.666666666666664C338.9166666666667,-25.47222222222222,338.13888888888886,-21.194444444444443,338.13888888888886,-16.52777777777777C338.13888888888886,-16.52777777777777,338.13888888888886,9.916666666666671,338.13888888888886,9.916666666666671C338.13888888888886,15.944444444444448,339.88888888888886,19.05555555555556,343.5833333333333,19.05555555555556C347.27777777777777,19.05555555555556,349.22222222222223,15.944444444444448,349.22222222222223,9.916666666666671C349.22222222222223,9.916666666666671,349.22222222222223,-16.52777777777777,349.22222222222223,-16.52777777777777C349.22222222222223,-22.55555555555555,347.27777777777777,-25.666666666666664,343.5833333333333,-25.666666666666664C343.5833333333333,-25.666666666666664,343.5833333333333,-25.666666666666664,343.5833333333333,-25.666666666666664" transform="matrix(1,0,0,1,0.0063,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M391.25,28.58333333333334C372.5833333333333,28.19444444444445,375.88888888888886,5.44444444444445,375.69444444444446,-13.416666666666664C375.69444444444446,-27.999999999999993,381.72222222222223,-35.388888888888886,393.77777777777777,-35.388888888888886C407.3888888888889,-35.388888888888886,412.25,-25.861111111111107,411.47222222222223,-11.083333333333329C411.47222222222223,-11.083333333333329,399.4166666666667,-11.083333333333329,399.4166666666667,-11.083333333333329C399.4166666666667,-17.694444444444443,400.38888888888886,-25.47222222222222,393.77777777777777,-25.666666666666664C389.88888888888886,-25.666666666666664,388.13888888888886,-22.55555555555555,388.13888888888886,-16.52777777777777C388.13888888888886,-16.52777777777777,388.13888888888886,9.916666666666671,388.13888888888886,9.916666666666671C388.13888888888886,15.944444444444448,389.88888888888886,19.05555555555556,393.77777777777777,19.05555555555556C399.02777777777777,19.05555555555556,399.80555555555554,11.472222222222227,399.4166666666667,4.666666666666671C399.4166666666667,4.666666666666671,392.4166666666667,4.666666666666671,392.4166666666667,4.666666666666671C392.4166666666667,4.666666666666671,392.4166666666667,-4.277777777777775,392.4166666666667,-4.277777777777775C392.4166666666667,-4.277777777777775,411.8611111111111,-4.277777777777775,411.8611111111111,-4.277777777777775C411.8611111111111,-4.277777777777775,411.8611111111111,27.41666666666667,411.8611111111111,27.41666666666667C411.8611111111111,27.41666666666667,403.30555555555554,27.41666666666667,403.30555555555554,27.41666666666667C403.30555555555554,27.41666666666667,401.75,23.138888888888893,401.75,23.138888888888893C400,26.05555555555556,395.72222222222223,28.58333333333334,391.25,28.58333333333334C391.25,28.58333333333334,391.25,28.58333333333334,391.25,28.58333333333334" transform="matrix(1,0,0,1,0.006,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#ee0f0f" d="M440.2777777777777,-6.999999999999993C440.2777777777777,-6.999999999999993,446.49999999999994,-34.02777777777777,446.49999999999994,-34.02777777777777C446.49999999999994,-34.02777777777777,457.9722222222222,-34.02777777777777,457.9722222222222,-34.02777777777777C457.9722222222222,-34.02777777777777,446.3055555555555,7.0000000000000036,446.3055555555555,7.0000000000000036C446.3055555555555,7.0000000000000036,446.3055555555555,27.41666666666667,446.3055555555555,27.41666666666667C446.3055555555555,27.41666666666667,434.24999999999994,27.41666666666667,434.24999999999994,27.41666666666667C434.24999999999994,27.41666666666667,434.24999999999994,7.0000000000000036,434.24999999999994,7.0000000000000036C434.24999999999994,7.0000000000000036,422.7777777777777,-34.02777777777777,422.7777777777777,-34.02777777777777C422.7777777777777,-34.02777777777777,434.4444444444444,-34.02777777777777,434.4444444444444,-34.02777777777777C434.4444444444444,-34.02777777777777,440.2777777777777,-6.999999999999993,440.2777777777777,-6.999999999999993" transform="matrix(1,0,0,1,-0.0081,65)" font-weight="bold" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="none" stroke="none" d="M0,100L1421,100" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg>
Any help please??
You should generate a text with its stroke like the following one:
<svg viewbox="0 0 100 100">
<text
x="0"
y="14"
font-size="14"
font-family="Impact"
stroke="red"
stroke-width="0.4"
stroke-linecap="round"
stroke-linejoin="round">
TECHNOLOGY
</text>
</svg>
If you have problems with raphael or snap.svg you should post that code in order we can help.
Related
SVG renders incorrectly
I have done this on CodePen and it works but when I see it on a browser it doesn't render correctly. It stays on the original size (145, 90) but the svg seems to be scaling. Once I change the viewbox property in the browser to something else manually and then back to "0 0 145 90" it works as I want it to. <svg data-v-1d986156="" viewbox="0 0 145 90"> <g data-v-1d986156=""> <text data-v-1d986156="" text-anchor="end" x="13" y="71" style="font-size: 6px; fill: rgb(0, 51, 102);">7</text> <text data-v-1d986156="" text-anchor="end" x="13" y="61" style="font-size: 6px; fill: rgb(0, 51, 102);">14</text> <text data-v-1d986156="" text-anchor="end" x="13" y="51" style="font-size: 6px; fill: rgb(0, 51, 102);">21</text> <text data-v-1d986156="" text-anchor="end" x="13" y="41" style="font-size: 6px; fill: rgb(0, 51, 102);">28</text> <text data-v-1d986156="" text-anchor="end" x="13" y="31" style="font-size: 6px; fill: rgb(0, 51, 102);">35</text> <text data-v-1d986156="" text-anchor="end" x="13" y="21" style="font-size: 6px; fill: rgb(0, 51, 102);">42</text> <text data-v-1d986156="" text-anchor="end" x="13" y="11" style="font-size: 6px; fill: rgb(0, 51, 102);">49</text> <line data-v-1d986156="" x1="15" y1="69" x2="145" y2="69" stroke="#003366" stroke-width="0.2"></line> <line data-v-1d986156="" x1="15" y1="59" x2="145" y2="59" stroke="#003366" stroke-width="0.2"></line> <line data-v-1d986156="" x1="15" y1="49" x2="145" y2="49" stroke="#003366" stroke-width="0.2"></line> <line data-v-1d986156="" x1="15" y1="39" x2="145" y2="39" stroke="#003366" stroke-width="0.2"></line> <line data-v-1d986156="" x1="15" y1="29" x2="145" y2="29" stroke="#003366" stroke-width="0.2"></line> <line data-v-1d986156="" x1="15" y1="19" x2="145" y2="19" stroke="#003366" stroke-width="0.2"></line> <line data-v-1d986156="" x1="15" y1="9" x2="145" y2="9" stroke="#003366" stroke-width="0.2"></line> </g> <line data-v-1d986156="" x1="0" y1="79" x2="145" y2="79" stroke="#003366"></line> <g data-v-1d986156=""> <rect data-v-1d986156="" fill="#49e5a6" id="outstanding" x="22.5" y="53" width="25" height="25.57"></rect> <text data-v-1d986156="" text-anchor="middle" x="35" y="88" class="percent" style="font: 8px serif;">15.8%</text> </g> <g data-v-1d986156=""> <rect data-v-1d986156="" fill="#00b9c1" id="good" x="52.5" y="13.3" width="25" height="65.34"></rect> <text data-v-1d986156="" text-anchor="middle" x="65" y="88" class="percent" style="font: 8px serif;">40.4%</text> </g> <g data-v-1d986156=""> <rect data-v-1d986156="" fill="#e76d93" id="requires_improvement" x="82.5" y="21.8" width="25" height="56.82"></rect> <text data-v-1d986156="" text-anchor="middle" x="95" y="88" class="percent" style="font: 8px serif;">35.1%</text> </g> <g data-v-1d986156=""> <rect data-v-1d986156="" fill="#ffcb4b" id="inadequate" x="112.5" y="64.4" width="25" height="14.2"></rect> <text data-v-1d986156="" text-anchor="middle" x="125" y="88" class="percent" style="font: 8px serif;">8.8%</text> </g> </svg> Images:
SVG is not correctly rendered with canvg
I need to convert svg to png and I'm using currently canvg to do this. But it's not working properly. As for example, using the demo app on https://canvg.js.org/demo/index.html with the svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="overflow: hidden; position: relative;" viewBox="-174 -90 468 452" width="468" height="452" preserveAspectRatio="xMinYMin">
<path fill="none" stroke="#333333" d="M60,0L60,128" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M60,128L60,128" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M60,128L60,272" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M-84,0L60,0" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M60,0L204,0" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.3.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<linearGradient id="ikr5p45-_ffffff:0-_B8B8B8:100" x1="0" y1="0.9999999999999998" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="f8x0o45-_ffffff:0-_B8B8B8:100" x1="0" y1="0.9999999999999998" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="lsc6m0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="ewq130-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="z96gg0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="0muoy0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="v9b5l0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<radialGradient id="o2zvpr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="mrqpyr_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="utdacr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="wuajcr_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="zg67dr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="hidu8r_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="9tpgwr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="1ma5zr_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
</defs>
<rect x="-30" y="182" width="180" height="180" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="28.88730162779191" y="240.8873016277919" width="62.22539674441618" height="62.22539674441618" rx="0" ry="0" fill="#808080" stroke="none" opacity="0.3" fill-opacity="1" stroke-width="3" transform="matrix(0.7071,0.7071,-0.7071,0.7071,209.9066,41.4832)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; fill-opacity: 1;" />
<rect x="28.88730162779191" y="240.8873016277919" width="62.22539674441618" height="62.22539674441618" rx="0" ry="0" fill="url('#ikr5p45-_ffffff:0-_B8B8B8:100')" stroke="#333333" opacity="1" fill-opacity="1" stroke-width="5.092592592592593" transform="matrix(0.7637,0.7637,-0.7637,0.7637,221.8992,18.4598)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" />
<path fill="#595959" stroke="none" d="M9.182800000000002,25.3319C9.182800000000002,25.3319,0.8701000000000001,33.6424,0.8701000000000001,33.6424C0.8701000000000001,33.6424,3.8665000000000003,36.6388,3.8665000000000003,36.6388C3.8665000000000003,36.6388,12.177000000000001,28.3272,12.17744,28.3272C12.177000000000001,28.3272,14.425400000000002,30.574500000000004,14.425400000000002,30.574500000000004C14.425400000000002,30.574500000000004,17.1578,20.376400000000004,17.1578,20.376400000000004C17.1578,20.376400000000004,6.959700000000001,23.108800000000002,6.959700000000001,23.108800000000002C6.959700000000001,23.108800000000002,9.182800000000002,25.3319,9.182800000000002,25.331350000000004C9.182800000000002,25.3319,9.182800000000002,25.3319,9.182800000000002,25.3319" opacity="1" transform="matrix(1,0,0,1,2.8873,291.1127)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1;" stroke-width="1" />
<rect x="-30" y="182" width="180" height="180" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="114" y="-90" width="180" height="180" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<circle cx="204" cy="0" r="40" fill="#808080" stroke="none" opacity="0.3" fill-opacity="1" stroke-width="3" transform="matrix(1,0,0,1,3,3)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; fill-opacity: 1;" />
<circle cx="204" cy="0" r="40" fill="url('#lsc6m0-_ffffff:0-_B8B8B8:100')" stroke="#333333" opacity="1" fill-opacity="1" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" />
<rect x="114" y="-90" width="180" height="180" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="-174" y="-90" width="180" height="180" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="-124" y="-40" width="80" height="80" rx="0" ry="0" fill="#808080" stroke="none" opacity="0.3" fill-opacity="1" stroke-width="3" transform="matrix(1,0,0,1,3,3)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; fill-opacity: 1;" />
<rect x="-124" y="-40" width="80" height="80" rx="0" ry="0" fill="url('#z96gg0-_ffffff:0-_B8B8B8:100')" stroke="#333333" opacity="1" fill-opacity="1" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" />
<rect x="-174" y="-90" width="180" height="180" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="34" y="-32" width="52" height="92" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<circle cx="60" cy="0" r="6.5" fill="#dc7868" stroke="#000000" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" /><text x="60" y="-20" text-anchor="middle" font-family="Tahoma" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Tahoma; font-size: 14px;">
<tspan dy="-20" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</text>
<rect x="34" y="-32" width="52" height="92" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
</svg>
The results are different on png than svg as in the image:
I think this is called masking, but I'm not an svg guru and I don't really know.
Is there any solution or alternative that will raster the images properly?
How to create an SVG icon consisting of two overlapping shapes, one with a hole?
I have made a progress bar icon from two partially overlapping SVG shapes.
I would like the icon to have the same color as the surrounding text, so I set stroke and fill to currentColor.
The icon is displayed correctly if the color of the surrounding text doesn't have alpha channel e.g. color: black. However, if the color of the surrounding text has alpha channel e.g. color: rgba (0, 0, 0, 0.7), then the icon is darker where the shapes overlap.
How can I get the same color at each point of the icon?
body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
<svg viewBox="0 0 44 18" width="220" height="90">
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="currentColor" stroke-width="2" fill="transparent" />
<rect x="2" y="2.5" width="24" height="10" fill="currentColor" />
</svg>
Question Prevent overlapping figures with alpha channel from shading each other? is very similar, but the accepted answer doesn't work in this case:
body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
<svg viewBox="0 0 44 18" width="220" height="90">
<defs>
<clipPath id="myClip">
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="black" stroke-width="2" fill="transparent" />
<rect x="2" y="2.5" width="24" height="10" />
</clipPath>
</defs>
<rect width="100%" height="100%" fill="currentColor" clip-path="url(#myClip)"/>
</svg>
Update:
I decided to draw the icon without overlapping parts, because it is much easier and it also looks good:
body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
<svg viewBox="0 0 44 18" width="220" height="90">
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="currentColor" stroke-width="2" fill="transparent" />
<rect x="4" y="4" width="23" height="7" rx="2" ry="2" fill="currentColor" />
</svg>
One solution is to user a mask. But if you don't change the geometry, you will get the same issue as with #InvisibleGorilla's solution: you will get antialiasing artifacts.
body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
<svg viewBox="0 0 44 18" width="220" height="90">
<defs>
<mask id="cutout">
<rect width="100%" height="100%" fill="white" />
<use xlink:href="#bar" fill="black" />
</mask>
<rect id="bar" x="2" y="2.5" width="24" height="10" />
</defs>
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="currentColor" stroke-width="2" fill="transparent"
mask="url(#cutout)" />
<use xlink:href="#bar" fill="currentColor" />
</svg>
To fix the antialiasing artifacts, move your bar so that it is positioned at a whole pixel (y="2") instead of a half pixel (y="2.5"). You still might still see very slight artifacts at some scales. But it should be a lot better.
body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
<svg viewBox="0 0 44 18" width="220" height="90">
<defs>
<mask id="cutout">
<rect width="100%" height="100%" fill="white" />
<use xlink:href="#bar" fill="black" />
</mask>
<rect id="bar" x="2" y="2" width="24" height="10" />
</defs>
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="currentColor" stroke-width="2" fill="transparent"
mask="url(#cutout)" />
<use xlink:href="#bar" fill="currentColor" />
</svg>
Before the rect where fill has currentColor, add a rect with the exact same attributes but with a white fill directly before it (so that it gets drawn underneath it in the svg).
See snipped below:
<style>
body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
</style>
<svg viewBox="0 0 44 18" width="220" height="90">
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="currentColor" stroke-width="2" fill="transparent" />
<rect x="2" y="2.5" width="24" height="10" fill="white" />
<rect x="2" y="2.5" width="24" height="10" fill="currentColor" />
</svg>
You could also change the order of your rects and add a matching white rect under the one where the stroke has currentColor.
Here's the updated snippet using background color and underlying both rects. I've tested on Chrome and Firefox on Mac and I don't see any lines from the background color rects.
<style>
body { background-color: #232b32; color: rgba(240, 240, 240, 0.7); }
</style>
<svg viewBox="0 0 44 18" width="220" height="90">
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="#232b32" stroke-width="2" fill="transparent" />
<rect x="2" y="2" width="40" height="11" rx="3" ry="3"
stroke="currentColor" stroke-width="2" fill="transparent" />
<rect x="2" y="2.5" width="24" height="10" fill="#232b32" />
<rect x="2" y="2.5" width="24" height="10" fill="currentColor" />
</svg>
<p>Some text</p>
Here's a screenshot of when I run this snippet.
svg code is not displaying at all when used inside an <img> tag
I have some SVG here which displays fine inside a div, but not inside an img with src="data:image/svg+xml;utf8, etc .....
I've swapped the svg for more simple ones and its fine, so I know it's something odd about my actual svg code.
<svg width="500" height="420">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: #000; stroke-width: 1px; } .erd-bc { fill: none; stroke: #aaa; stroke-width: 2px; } marker { fill: none; stroke: #000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(#card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
You need to URI encode the file and you also need to give it proper namespaces since you're not embedding it in a html file any more. E.g.
<img src='data:image/svg+xml;charset=utf-8,<svg width="500" height="420" xmlns="http://www.w3.org/2000/svg">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: %23fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: %23000; stroke-width: 1px; } .erd-bc { fill: none; stroke: %23aaa; stroke-width: 2px; } marker { fill: none; stroke: %23000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(%23card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
</svg>'></img>
Why are my SVG marker and gradient defs being overwritten?
The gradient and marker definitions for my SVG appear to get overwritten when my SVG is inside my webpage. There are no other SVGs on the page.
But when I take the SVG out of the page, it looks just fine.
Here is the SVG in this example.
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="800">
<style>
svg .node.species {
stroke: #FFB800;
stroke-width: 3px;
size: 300px;
}
svg .node.reaction {
stroke: #8089F7;
opacity: 0;
stroke-width: 1.5px;
}
svg .link {
stroke: black;
stroke-width: 3px;
}
svg .link.modifier {
stroke-dasharray: 5, 5;
}
svg .node-label {
font-size: 14px;
font-family: Georgia;
font-weight: bolder;
text-anchor: middle;
dominant-baseline: middle;
}
/* svg .node.selected {
stroke: #FF0000;
}
svg .link.selected {
stroke: #FF0000;
}*/
svg marker {
overflow: visible;
}
svg .null-symbol {
fill: none;
stroke: black;
stroke-width: 3px;
}
</style>
<defs>
<linearGradient id="gradient">
<stop offset="5%" stop-color="#FFDC9E"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="markerGradient">
<stop offset="5%" stop-color="rgb(97, 116, 255)"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="reactionGradient">
<stop offset="5%" stop-color="#B0C0FF"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<marker case-sensitive="refX,refY" id="production" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="degradation" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="modifier" viewBox="0 0 10 10" markerWidth="30" markerHeight="30" orient="auto" refx="-0.4" refy="0" refX="-0.4" refY="0">
<path stroke="black" stroke-width="0.3" fill="none" d="M0,0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,-0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,0.5641895835477563Z"></path>
</marker>
</defs>
<g transform="translate(, )scale(1)">
<g>
<line class="reaction production link" marker-end="url(#production)" x1="449.9996697164325" y1="218.45791860388687" x2="451.42692033038736" y2="246.7481154723436">
</line><line class="reaction production link" marker-end="url(#production)" x1="399.21583821133174" y1="309.0153067725509" x2="345.33989421522693" y2="338.2824980727582">
</line>
</g>
<g>
<line class="reaction reactant link" x1="446.9075572254284" y1="157.1677217354301" x2="449.9996697164325" y2="218.45791860388687">
</line><line class="reaction reactant link" x1="453.0917822074366" y1="279.7481154723436" x2="399.21583821133174" y2="309.0153067725509">
</line>
</g>
<g>
</g>
<g draggable="" transform="translate(446.9075572254284,157.1677217354301)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S1, Name: S1</title>
</rect>
<text class="node-label">S1</text>
</g><g draggable="" transform="translate(453.0917822074366,279.7481154723436)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S2, Name: S2</title>
</rect>
<text class="node-label">S2</text>
</g><g draggable="" transform="translate(345.33989421522693,338.2824980727582)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S3, Name: S3</title>
</rect>
<text class="node-label">S3</text>
</g>
<g draggable="" transform="translate(473.4770117242872,216.74146493626216)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction1, Name: reaction1</title>
</circle>
<text class="node-label"></text>
</g><g draggable="" transform="translate(409.9633485910613,329.9478703486097)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction2, Name: reaction2</title>
</circle>
<text class="node-label"></text>
</g>
</g>
</svg>
EDIT 1
Here is the style of the linearGradient element
EDIT 2
Style of the defs element
EDIT 3
I found that when I remove the head tag, and then reapply it, the SVG is then correctly rendered. Weird.
Turns out I had <base href="/"> in head which was messing things up.