SVG is not correctly rendered with canvg - svg
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?
Related
SVG fill figure and its negative in different colours
I'm having trouble creating a gardient in a svg image. I need to fill the figure as its progress increase (0~100% or 0~1) but also the negative of the figure path.
Let me show what I need with some images to be more clear.
This is what I can achieve:
Already Done
And this is what I need:
Hope to achieve
Is there a simple way to achieve this?
EDIT: Sorry, this is my SVG code:
<svg id="Capa_1" enable-background="new 0 0 503.353 503.353" height="512" viewBox="0 0 503.353 503.353" width="512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="#aaa" offset="0" />
<stop stop-color="#aaa" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="green" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="green" offset="1" />
</linearGradient>
</defs>
<path class="kiwi" d="m483.142 269.401-1.281-12.05-12.05-1.281c-1.145-.121-9.029-.899-21.262-.838-.005-.412-.001-.824-.009-1.236-1.83-95.103-83.035-161.783-86.491-164.575l-9.426-7.616-9.426 7.616c-.768.621-5.382 4.403-12.108 10.948-24.406-55.352-67.489-90.736-69.986-92.753l-9.426-7.616-9.426 7.616c-2.49 2.011-45.318 37.183-69.764 92.245-6.44-6.232-10.835-9.835-11.583-10.439l-9.426-7.616-9.426 7.616c-3.456 2.792-84.661 69.472-86.491 164.575-.008.414-.004.826-.009 1.24-12.662-.098-20.841.71-22.01.834l-12.05 1.281-1.281 12.05c-.47 4.418-10.74 108.988 55.213 177.53 36.076 37.492 87.354 56.422 152.663 56.422 7.668 0 15.537-.269 23.59-.791 8.057.523 15.917.791 23.59.791 65.303 0 116.589-18.932 152.663-56.422 65.952-68.543 55.682-173.113 55.212-177.531zm-130.519-148.024c19.981 19.489 64.799 70.155 65.927 133.393.013.733.002 1.465.004 2.198-23.708 2.614-52.747 8.816-80.739 22.639-10.149-29.958-26.595-55.141-41.675-73.83 14.488-39.789 42.01-70.284 56.483-84.4zm-100.946 345.907c-44.573-42.071-66.743-86.537-65.926-132.316 1.127-63.242 45.954-113.913 65.926-133.392 19.981 19.489 64.799 70.155 65.927 133.392.815 45.779-21.354 90.244-65.927 132.316zm-.001-427.713c14.614 14.254 42.507 45.186 56.882 85.514-12.001 14.807-24.912 33.756-34.854 55.966-6.991-6.838-11.814-10.794-12.601-11.43l-9.426-7.616-9.426 7.616c-.767.62-5.371 4.395-12.082 10.923-10.056-22.312-23.091-41.309-35.146-56.097 14.441-40.021 42.123-70.704 56.653-84.876zm-166.124 215.199c1.127-63.242 45.954-113.913 65.926-133.393 14.402 14.047 41.701 44.292 56.249 83.765-15.218 18.751-31.923 44.168-42.187 74.464-27.697-13.677-56.423-19.896-79.991-22.557 0-.76-.011-1.519.003-2.279zm11.625 171.501c-43.922-45.516-48.054-113.042-47.706-140.938 21.81-.277 67.78 2.211 108.551 24.244-1.303 7.968-2.101 16.179-2.264 24.619-.936 48.66 19.036 95.238 59.414 138.849-50.56-2.269-90.153-17.923-117.995-46.774zm308.999 0c-27.843 28.855-67.441 44.526-118.002 46.781 40.382-43.613 60.357-90.193 59.42-138.856-.162-8.44-.961-16.651-2.263-24.619 40.783-22.038 86.768-24.519 108.55-24.245.348 27.909-3.787 95.426-47.705 140.939z"/>
</svg>
And the CSS class:
.kiwi {
fill: url(#gradient);
position: absolute;
height: auto;
}
Thanks!
Well the easy way based on what your path looks like is just to copy part of the shape that draws the outline, put it underneath your existing shape and animate it using a different gradient.
(A slightly better way would have been to draw the shape using a fat stroke rather than a fill and put a different gradient on the stroke and the fill using gradientUnits= userSpaceOnUse.)
.kiwi {
fill: url(#gradient1);
position: absolute;
height: auto;
}
.anzac {
fill: url(#gradient2);
position: absolute;
height: auto;
}
<svg id="Capa_1" enable-background="new 0 0 503.353 503.353" height="512" viewBox="0 0 503.353 503.353" width="512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="#aaa" offset="0" />
<stop stop-color="#aaa" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="green" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="green" offset="1" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="#aaa" offset="0" />
<stop stop-color="#aaa" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="blue" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="blue" offset="1" />
</linearGradient>
</defs>
<path class="anzac" d="m483.142 269.401-1.281-12.05-12.05-1.281c-1.145-.121-9.029-.899-21.262-.838-.005-.412-.001-.824-.009-1.236-1.83-95.103-83.035-161.783-86.491-164.575l-9.426-7.616-9.426 7.616c-.768.621-5.382 4.403-12.108 10.948-24.406-55.352-67.489-90.736-69.986-92.753l-9.426-7.616-9.426 7.616c-2.49 2.011-45.318 37.183-69.764 92.245-6.44-6.232-10.835-9.835-11.583-10.439l-9.426-7.616-9.426 7.616c-3.456 2.792-84.661 69.472-86.491 164.575-.008.414-.004.826-.009 1.24-12.662-.098-20.841.71-22.01.834l-12.05 1.281-1.281 12.05c-.47 4.418-10.74 108.988 55.213 177.53 36.076 37.492 87.354 56.422 152.663 56.422 7.668 0 15.537-.269 23.59-.791 8.057.523 15.917.791 23.59.791 65.303 0 116.589-18.932 152.663-56.422 65.952-68.543 55.682-173.113 55.212-177.531z"/>
<path class="kiwi" d="m483.142 269.401-1.281-12.05-12.05-1.281c-1.145-.121-9.029-.899-21.262-.838-.005-.412-.001-.824-.009-1.236-1.83-95.103-83.035-161.783-86.491-164.575l-9.426-7.616-9.426 7.616c-.768.621-5.382 4.403-12.108 10.948-24.406-55.352-67.489-90.736-69.986-92.753l-9.426-7.616-9.426 7.616c-2.49 2.011-45.318 37.183-69.764 92.245-6.44-6.232-10.835-9.835-11.583-10.439l-9.426-7.616-9.426 7.616c-3.456 2.792-84.661 69.472-86.491 164.575-.008.414-.004.826-.009 1.24-12.662-.098-20.841.71-22.01.834l-12.05 1.281-1.281 12.05c-.47 4.418-10.74 108.988 55.213 177.53 36.076 37.492 87.354 56.422 152.663 56.422 7.668 0 15.537-.269 23.59-.791 8.057.523 15.917.791 23.59.791 65.303 0 116.589-18.932 152.663-56.422 65.952-68.543 55.682-173.113 55.212-177.531zm-130.519-148.024c19.981 19.489 64.799 70.155 65.927 133.393.013.733.002 1.465.004 2.198-23.708 2.614-52.747 8.816-80.739 22.639-10.149-29.958-26.595-55.141-41.675-73.83 14.488-39.789 42.01-70.284 56.483-84.4zm-100.946 345.907c-44.573-42.071-66.743-86.537-65.926-132.316 1.127-63.242 45.954-113.913 65.926-133.392 19.981 19.489 64.799 70.155 65.927 133.392.815 45.779-21.354 90.244-65.927 132.316zm-.001-427.713c14.614 14.254 42.507 45.186 56.882 85.514-12.001 14.807-24.912 33.756-34.854 55.966-6.991-6.838-11.814-10.794-12.601-11.43l-9.426-7.616-9.426 7.616c-.767.62-5.371 4.395-12.082 10.923-10.056-22.312-23.091-41.309-35.146-56.097 14.441-40.021 42.123-70.704 56.653-84.876zm-166.124 215.199c1.127-63.242 45.954-113.913 65.926-133.393 14.402 14.047 41.701 44.292 56.249 83.765-15.218 18.751-31.923 44.168-42.187 74.464-27.697-13.677-56.423-19.896-79.991-22.557 0-.76-.011-1.519.003-2.279zm11.625 171.501c-43.922-45.516-48.054-113.042-47.706-140.938 21.81-.277 67.78 2.211 108.551 24.244-1.303 7.968-2.101 16.179-2.264 24.619-.936 48.66 19.036 95.238 59.414 138.849-50.56-2.269-90.153-17.923-117.995-46.774zm308.999 0c-27.843 28.855-67.441 44.526-118.002 46.781 40.382-43.613 60.357-90.193 59.42-138.856-.162-8.44-.961-16.651-2.263-24.619 40.783-22.038 86.768-24.519 108.55-24.245.348 27.909-3.787 95.426-47.705 140.939z"/>
</svg>
How to apply a gradient to a marker?
In SVG, how to apply the gradient applied to a line to its marker-end ?
<?xml version='1.0' encoding='UTF-8' standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="820px"
height="500px"
viewBox="0 0 820 500"
version="1.1" >
<style>
.axis3 {
stroke-width: 40px;
marker-end:url(#arrow);
stroke: url('#gradient_3');
fill: url('#gradient_3');
height: 30px;
}
.axis4 {
stroke-width: 40px;
marker-end:url(#arrow);
stroke: url('#gradient_4');
fill: url('#gradient_4'); /* corrected */
height: 30px;
}
</style>
<defs>
<marker
id="arrow"
markerWidth="20"
markerHeight="40"
refX="0"
refY="20"
orient="auto"
markerUnits="userSpaceOnUse"
style="fill:inherit;">
<path style="stroke:none;fill:inherit;overflow:visible;" d="M0 0 L20 20 L0 40 Z" />
</marker>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="yellow" />
<stop offset="20%" stop-color="red" />
</linearGradient>
<linearGradient id="gradient_4" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="blue" />
<stop offset="20%" stop-color="green" />
</linearGradient>
</defs>
<line class="axis3" x1="50" x2="400" y1="50" y2="50" />
<line class="axis4" x1="50" x2="400" y1="100" y2="100" />
</svg>
With the code above, marker is always black.
As there are several elements line with different gradients, gradient can not be applied directly on the path.
I tried to add style="fill:inherit" - with no success.
This is how I would do it:
Instead of fill:inherit; I'm setting two css variables for the svg element: style="--fill:url(#gradient_3); --stroke:url(#gradient_4)". Both the line and the marker are using those variables for the fill and the stroke.
Alternatively you may choose to use the gradients directly in the code <path style="overflow:visible;fill:url(#gradient_3);"...
To your code I've added a #gradient_3 since you are using it.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="820px"
height="500px"
viewBox="0 0 820 500"
version="1.1"
style="--fill:url(#gradient_3); --stroke:url(#gradient_4)">
<style>
.axis {
stroke-width: 40px;
marker-end:url(#arrow);
height: 30px;
stroke:var(--stroke);
}
</style>
<defs>
<marker
id="arrow"
markerWidth="20"
markerHeight="40"
refX="0"
refY="20"
orient="auto"
markerUnits="userSpaceOnUse">
<path style="overflow:visible;fill:var(--fill);" d="M0 0 L20 20 L0 40 Z" />
</marker>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="green" />
<stop offset="20%" stop-color="blue" />
</linearGradient>
<linearGradient id="gradient_4" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="blue" />
<stop offset="20%" stop-color="green" />
</linearGradient>
</defs>
<line class="axis" x1="50" x2="400" y1="50" y2="50" />
</svg>
Answer to "Make marker-end same color as path?" mentions that there is no inheritance of colors from related path. Situation has not evolve since this answer.
SVG - Line at baseline
I am drawing something here as you can see. But there is a problem: the lines at the very top and very bottom of the image (the black "ruler") are only half the width because the "base" of the line is in the center. For a text field, I was able to reposition the dominant-baseline and thus position my texts perfectly. However, a line (or path) doesn't seem to have a baseline. How can I make sure my lines are at the very top and very bottom? Is the only way to do this to hard position them at the line width / 2? I tested this out, and it works perfectly, however, I'm not the biggest fan of hard coding these numbers. Is there a way not to hard code this? Here's my code and my example image: <svg width="200" height="200"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(0, 0, 255);"/> <stop offset="50%" style="stop-color:rgb(255, 255, 255);"/> <stop offset="100%" style="stop-color:rgb(255, 127, 0);"/> </linearGradient> </defs> <rect width="20%" height="100%" fill="url(#gradient)" /> <line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/> <line x1="22%" x2="24.5%" y1="0" y2="0" style="stroke: black;"/> <line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/> <line x1="22%" x2="24.5%" y1="100%" y2="100%" style="stroke: black;"/> <text x="25%" y="0%" dominant-baseline="hanging">Top text</text> <text x="25%" y="50%" dominant-baseline="middle"> <tspan x="25%" dy="-3%">middle text 1</tspan> <tspan x="25%" dy="6%">middle text 2</tspan> </text> <text x="25%" y="100%">bottom text</text> </svg> Here's a Fiddle if you want to try it out. Just zoom in really far. https://jsfiddle.net/jkom2x8f/1/
Your solution is the correct solution. It is the only real solution. There is nothing wrong with it.
It seems that after a lot of searching around and reading the comments, I concluded that hard coding the y positions to 0.5 and 199.5 is the only way to do it: <svg width="200" height="200"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(0, 0, 255);"/> <stop offset="50%" style="stop-color:rgb(255, 255, 255);"/> <stop offset="100%" style="stop-color:rgb(255, 127, 0);"/> </linearGradient> </defs> <rect width="20%" height="100%" fill="url(#gradient)" /> <line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/> <line x1="22%" x2="24.5%" y1="0.5" y2="0.5" style="stroke: black;"/> <line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/> <line x1="22%" x2="24.5%" y1="199.5" y2="199.5" style="stroke: black;"/> <text x="25%" y="0%" dominant-baseline="hanging">Top text</text> <text x="25%" y="50%" dominant-baseline="middle"> <tspan x="25%" dy="-3%">middle text 1</tspan> <tspan x="25%" dy="6%">middle text 2</tspan> </text> <text x="25%" y="100%">bottom text</text> </svg> Here's a fiddle: https://jsfiddle.net/jkom2x8f/5/
svg fill url not working in any Chrome Extension pages but working on any websites and local files
I'm working on my Chrome Extension:zzllrr Imager Geek and find svg fill url not working in any Chrome Extension pages (URLs start with chrome-extension://). But on normal webpages(http:,https:, file://.) it works like a charm. Below is the code: <svg id="LRectSq30821072" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: 66px; top: 155px; width: 76px; height: 76px; z-index: 2001; filter: none; transform: none;"> <defs> <linearGradient id="LRectSq30821072linearfill" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#3f377d;stop-opacity:1"></stop> <stop offset="34%" style="stop-color:#da310a;stop-opacity:1"></stop> <stop offset="68%" style="stop-color:#cd2c78;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#82a462;stop-opacity:1"></stop> </linearGradient> </defs> <rect x="1" y="1" width="74" height="74" stroke-width="2" stroke="#585c1a" stroke-opacity="1" fill="url(#LRectSq30821072linearfill)" fill-opacity="1" stroke-dasharray="" stroke-dashoffset="1" stroke-linecap="butt" stroke-linejoin="miter"></rect> </svg>
SVG rounded stroke not working properly
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.