textpath in svg not working in IE? - html
I see IE display different with firefox, chrome, safari...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="700" width="1300">
<defs>
<path id="defsPath0" transform="translate(0, 0)" d="M-25,12 L75,12 M-25,32 L75,32 M-25,52 L75,52 M-25,72 L75,72" />
<path id="defsPath1" transform="translate(0, 20)" d="M-25,12 L75,12 M-25,32 L75,32 M-25,52 L75,52 M-25,72 L75,72" />
<path id="defsPath2" transform="translate(0, 40)" d="M-25,12 L75,12 M-25,32 L75,32 M-25,52 L75,52 M-25,72 L75,72" />
<path id="defsPath3" transform="translate(0, 60)" d="M-25,12 L75,12 M-25,32 L75,32 M-25,52 L75,52 M-25,72 L75,72" />
</defs>
<g>
<text x="0" y="0" font-family="MS UI Gothic" font-size="15" style="" fill="rgb(0, 0, 0)" fill-rule="nonzero" transform="matrix(1,0,0,1,200,20)">
<textPath id="textPath_0_0" xlink:href="#defsPath0">1</textPath>
<textPath id="textPath_0_1" xlink:href="#defsPath1">2</textPath>
<textPath id="textPath_0_2" xlink:href="#defsPath2">3</textPath>
<textPath id="textPath_0_3" xlink:href="#defsPath3">4</textPath>
</text>
</g>
with Firefox, chrome:
1
2
3
4
But IE:
1
234
Please help me ! thank you so much !
I use javascript make to svg !
Then you should have shown us your Javascript also.
However I suspect I know what the problem is. I am guessing you are using createElement() to create your SVG elements. You need to use createElementNS():
document.createElementNS(""http://www.w3.org/2000/svg", "textPath");
Related
Text around the SVG
I'm absolutely beginner with SVG, and I need to put text around this moon... I tried to make text around a path and could not get the right sizes and match it with the moon. <svg viewBox="-6 -6 30 40"> <defs> <mask id="earth"> <rect fill="white" x="-5" y="-5" width="10" height="10"></rect> <circle fill="black" cx="3.141592654" r="5" /> </mask> </defs> <circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-25)"/> </svg>
Draw the moon with a path. (and edit in: https://yqnn.github.io/svg-path-editor/) The path is drawn counter-clockwise, if you want to draw the innermoon text like your design, it is easier to add a 2nd path drawn clockwise. Setting pathLength helps in positioning with startoffset Look up all attributes you don't know in the docs. <svg viewBox="0 0 80 60"> <rect width="100%" height="100%" fill="skyblue"/> <path id="Moon" pathLength="10" d="m16 2a12 12 0 1018 13 1 1 0 01-18-13z"/> <text> <textPath href="#Moon" startoffset="1" text-anchor="left" dominant-baseline="hanging" fill="blue" font-size="3px">Outside moon</textPath> </text> <text> <textPath href="#Moon" startoffset="6" text-anchor="right" dominant-baseline="hanging" fill="rebeccapurple" font-size="4">Inside moon</textPath> </text> </svg>
SVG doesn't display correctly
Here's the how my SVG is supposed to look like.
below is how it looks when I code it in my web.
I'm not really sure what's going on here. Any help would be much appreciated. Below is my SVG code. Thanks in advance.
<svg class="product-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
<defs>
<style>.cls-1,.cls-2{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5{stroke:#333;stroke-miterlimit:10;}.cls-1{stroke-width:3.79px;}.cls-2{stroke-width:5px;}.cls-3{fill:#333;}.cls-4,.cls-5{fill:none;stroke-linecap:round;}.cls-4{stroke-width:3px;}.cls-5{stroke-width:2.27px;}</style>
</defs>
<circle class="cls-1" cx="460.7" cy="282.87" r="48.53"/>
<circle class="cls-2" cx="519.36" cy="325.31" r="64.01"/>
<rect class="cls-3" x="262.17" y="399.01" width="384.48" height="31.32" rx="15.66"/>
<path class="cls-3" d="M284.36,441.13,301.1,552.91a45,45,0,0,0,44.51,38.34h217.6a45,45,0,0,0,44.5-38.34l16.74-111.78Z"/>
<path class="cls-3" d="M453,392.53h-82.8c0-9.35,3.12-21.17,8.36-28.06a0,0,0,0,0,0,0,41,41,0,0,1,32.67-16.19H412a40.87,40.87,0,0,1,29,12C448.43,367.71,453,381.19,453,392.53Z"/>
<path class="cls-3" d="M436.92,302.87a13.9,13.9,0,0,1-15.47,21.65l-8.06,17.27L410.85,284l-3.54,55.67-7.06-15.13a13.92,13.92,0,0,1-4.44.74,13.53,13.53,0,0,1-1.81-.12,13.9,13.9,0,0,1-9.22-22.27q-.36-.31-.69-.66a16.43,16.43,0,0,1,11.25-28,17.85,17.85,0,0,1,32.62.12,16.44,16.44,0,0,1,9,28.52Z"/>
<path class="cls-3" d="M366.71,392.53H288.56l-4-7.39a41.4,41.4,0,0,1,24.28-53.27c.82-.31,1.64-.59,2.47-.84a41.62,41.62,0,0,1,26.77.94C364.37,341.79,366.71,392.53,366.71,392.53Z"/>
<path class="cls-3" d="M391.58,348.27c-14.7,3.83-23,19.65-23,19.65s-9.68-51-51.63-41.93c1.2-6.61,2.68-12.13,4.41-14.4a38.86,38.86,0,0,1,31-15.34H353a38.71,38.71,0,0,1,25.09,9.18q.33.35.69.66A13.9,13.9,0,0,0,388,328.36C389.39,335,390.92,342.11,391.58,348.27Z"/>
<path class="cls-3" d="M381.81,241.65a15.59,15.59,0,0,0-13.64-15.47,16.94,16.94,0,0,0-30.93-.12,15.57,15.57,0,0,0-10,27.15,13.18,13.18,0,0,0,10.45,21.23,13.32,13.32,0,0,0,4.21-.7l6.69,14.34L352,235.31l2.41,54.79L362,273.74a13.19,13.19,0,0,0,14.66-20.53A15.5,15.5,0,0,0,381.81,241.65Z"/>
<path class="cls-3" d="M317.43,267.16a16.46,16.46,0,0,0-19.2-10.26,17.86,17.86,0,0,0-30.6,11.31,16.43,16.43,0,0,0,.14,30.53,13.9,13.9,0,0,0,18.17,17.11,13.67,13.67,0,0,0,3.9-2.25l11.91,11.71-16.18-53.39,22.63,53.26,1.5-19a13.7,13.7,0,0,0,4.41-.86,13.92,13.92,0,0,0,2.5-24.84A16.38,16.38,0,0,0,317.43,267.16Z"/>
<path class="cls-3" d="M559.1,334.45a52.33,52.33,0,0,0-10.77,1.11,11.64,11.64,0,0,0-9.16,10.58,20.41,20.41,0,0,0,7.43-2.49,1.5,1.5,0,0,1,1.49,2.6,23.18,23.18,0,0,1-23.09,0,1.5,1.5,0,1,1,1.49-2.6,20.66,20.66,0,0,0,5,2,11.73,11.73,0,0,0-9.72-10.5,53,53,0,0,0-8.78-.73,52.3,52.3,0,0,0-52,58.08H611.1a54.68,54.68,0,0,0,.32-5.76A52.31,52.31,0,0,0,559.1,334.45Z"/>
<path class="cls-4" d="M535.58,351.74a54.85,54.85,0,0,1,2.64-23.52A52.17,52.17,0,0,1,543,318.16"/>
<path class="cls-3" d="M533.18,301.9c-.09-.11-.19-.21-.28-.31-7.58-8.15-15.6-5.68-23.23-5.15a28.59,28.59,0,0,1-3.33.08c-20.51-.81-21-14.8-21-14.8s-6.13,24,10.4,40.7c13.35,13.48,30.33,10,38,1-18.15-2.45-25.58-9.82-25.58-9.82s5.16,1.91,16.59,3.35c2.19.27,4.37.44,6.46.53a32.26,32.26,0,0,1,5.28.63S537.19,306.68,533.18,301.9Z"/>
<polygon class="cls-3" points="372.55 318.16 372.31 318.16 372.44 317.77 372.55 318.16"/>
<polygon class="cls-3" points="357.37 317.77 357.5 318.16 357.26 318.16 357.37 317.77"/>
<path class="cls-4" d="M524.8,274.42a54.68,54.68,0,0,0-2.64-23.52,52.15,52.15,0,0,0-4.75-10.06"/>
<path class="cls-3" d="M527.2,224.58c.09-.11.19-.21.29-.31,7.58-8.15,15.59-5.68,23.22-5.15a28.59,28.59,0,0,0,3.33.08c20.52-.81,21-14.8,21-14.8s6.13,24-10.39,40.7c-13.35,13.48-30.34,10-38,1,18.15-2.45,25.58-9.82,25.58-9.82s-5.16,1.91-16.59,3.35c-2.19.27-4.36.44-6.46.53a32,32,0,0,0-5.27.63S523.19,229.36,527.2,224.58Z"/>
<path class="cls-5" d="M463.65,244.29a41.6,41.6,0,0,1,2-17.84,38.84,38.84,0,0,1,3.61-7.62"/>
<path class="cls-3" d="M461.83,206.49l-.22-.23c-5.75-6.18-11.82-4.31-17.61-3.9a23.68,23.68,0,0,1-2.52.06c-15.56-.62-15.93-11.23-15.93-11.23s-4.64,18.22,7.89,30.86c10.12,10.22,23,7.58,28.82.77-13.76-1.85-19.4-7.45-19.4-7.45s3.92,1.45,12.58,2.54c1.66.21,3.31.34,4.9.41a23.37,23.37,0,0,1,4,.48S464.87,210.12,461.83,206.49Z"/>
</svg>
Remove the value of the class attribute in the svg element. Looks like you have defined a style for that class and that is causing the svg to have a border specified. So: <svg class=“product-icon” Becomes <svg class=“” Or you can leave the class in there and revisit the product-icon style definition and correct it. Not sure what it’s made of but perhaps removing the border property if it has it specified... Also check if you have any other style rules that are targeting the svg element... Inspect the the svg element in developer tools and check what styles are being applied. The actual svg code is correct.
Not able to set SVG as a CSS background image
I have an SVG that I want to set as a background image for an input tag so that I could use an image as a radio button. I've been following many guides but nothing seems to work. I'm suspecting that it has to be the SVG content itself.
Here's the SVG:
<svg width="80px" height="80px" viewBox="473 123 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="face_sad" opacity="0.8" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(473.000000, 123.000000)">
<path d="M40,0 C17.90861,-1.3527075e-15 2.705415e-15,17.90861 0,40 C-2.705415e-15,62.09139 17.90861,80 40,80 C62.09139,80 80,62.09139 80,40 C80,29.3913404 75.7857264,19.2171839 68.2842712,11.7157288 C60.7828161,4.21427361 50.6086596,6.49593051e-16 40,0 Z M40,77.6 C19.2340934,77.6 2.4,60.7659066 2.4,40 C2.4,19.2340934 19.2340934,2.4 40,2.4 C60.7659066,2.4 77.6,19.2340934 77.6,40 C77.5779535,60.7567678 60.7567678,77.5779535 40,77.6 L40,77.6 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M40,49.2 C27.2,49.2 20.16,59.008 19.408,60.128 C19.1388619,60.481731 19.0872921,60.9552533 19.2739762,61.3586265 C19.4606604,61.7619997 19.8550164,62.0291441 20.2988593,62.0529021 C20.7427021,62.0766601 21.1633224,61.8531397 21.392,61.472 C22.08,60.464 28.408,51.6 40,51.6 C51.592,51.6 57.92,60.464 58.608,61.472 C58.9937796,61.9790342 59.7085433,62.096207 60.2360188,61.7388849 C60.7634943,61.3815628 60.9197839,60.6743215 60.592,60.128 C59.84,59.008 52.8,49.2 40,49.2 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="29.616" cy="28.8" rx="4" ry="4"></ellipse>
<ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="50.384" cy="28.8" rx="4" ry="4"></ellipse>
<path d="M54.76,35.04 C54.6,34.88 54.44,34.8 54.2,34.8 C53.96,34.8 53.8,34.88 53.72,35.04 C53.64,35.12 52.44,36.56 51.16,38.32 C49.48,40.8 48.6,42.72 48.6,43.92 C48.6,46.88 51.08,49.2 54.2,49.2 C57.24,49.2 59.8,46.8 59.8,43.92 C59.8,42.72 58.92,40.88 57.24,38.4 C56.04,36.56 54.76,35.12 54.76,35.04 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</svg>
and my CSS for the input:
input#bad-choice {
background: url(../assets/img/svgs/emoji-bad.svg);
}
I've tried adding thing like no-repeat left top in background or even changing it to background-image, but nothing seems to work. I even tried converting it to data URI but that didn't seem to work neither. Any tips would be greatly appreciated. Thank you.
Why is the emoji not displayed in the SVG in Chrome?
The emoji in the SVG correctly displays in both Safari and Firefox. In Chrome and Opera it is not displayed at all. What do I need to do to have the emoji also display in Chrome and Opera? <svg id="SVGbgcolor1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 144 144" alt="SVG Bitcoin Pictograph"> <g> <text id="flag" x="0" y="136" font-family="courier" font-size="144">🇺🇸</text> <g id="SVGbgcolor2" transform="matrix(2.403433 0 0 2.403433 133.9157 -.2672786)" fill="#ffff11" stroke="black"> <path d="m-29.67313 32.30631c-0.0078 3.964844-0.01563 7.929687-0.02344 11.89453 4.250716-0.05757 9.512582 0.672079 12.68164-2.011719 2.020462-1.485994 1.7925-8.830264-2.508482-9.337212-3.355145-0.489526-6.76593-0.500321-10.14972-0.5456z"></path> <path d="m-29.66532 15.95475 0.09375 9.896485c3.94585-0.118673 9.206302 0.331177 11.81609-1.285296 2.052885-1.630257 1.024997-8.44682-3.021329-8.344769-2.954353-0.25838-5.925276-0.251126-8.888509-0.26642z"></path> <path d="m-56.63264-1.090505-0.08727 63.0228 62.6767-0.05623-0.033283-62.95665zm22.46341 6.233736h7.091797v4.530687h4.558594l-0.147496-4.383191h7.132551l-0.05164 4.411386c5.97362 0.3102366 11.03635 8.194718 8.783373 13.20227-1.403588 2.992536-4.061669 5.443424-7.199219 6.509766 4.270871 0.752585 9.289582 2.353423 9.201172 8.21875 0.4854457 8.953997-3.897788 10.18234-10.63281 13.90966v4.358297h-7.089844v-4.379284h-4.554687v4.52678h-7.091797v-4.52678h-10.81445l-0.05977-5.75189c1.541302 0.125363 4.914709-0.106688 4.939639-2.629801-0.03614-7.277082 0.06346-18.24454-0.02479-25.51909-0.172768-2.90147-4.855077-2.632184-4.855077-2.632184v-5.314695h10.81445z"></path> </g> </g> <circle id="rounded1" cx="72" cy="72" r="72" stroke="black" stroke-width="2" fill="transparent"></circle> <rect x="0" y="0" width="144" height="144" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0"></rect> </svg>
Worked it out. Needed to change font-size to 71 or less (font-size="71"). It seems that in Chrome 55.0.2883.95 greater font-sizes result in nothing being rendered. Though the emoji is present in code as can be seen when using toDataURL.
Rendering RTL text along an SVG Path
Trying to render a Hebrew text along a path in SVG causes a bug in Chrome - the glyphs are rendered backwards (left-to-right), making the text unreadable. <svg height="220" width="190"> <defs> <path id="MyPath2" d="M0,100 L200,100" /> </defs> <use xlink:href="#MyPath2" fill="none" stroke="red" /> <text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl"> <textPath xlink:href="#MyPath2"> הטקסט הזה ייראה הפוך </textPath> </text> </svg> Is there a way to get around this? Is this a known bug or is there an attribute I should've used? JSFIddle: http://jsfiddle.net/j9RnL/
After not finding an elegant solution myself, I just reversed the characters.
function reverse(s, languageCode) {
if (['he', 'ar'].indexOf(languageCode) === -1)
return s;
return s.split("").reverse().join("");
}
I modified your SVG and it seems to render correctly on Chrome 100 and Firefox 100: <svg viewBox="0 0 190 220" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="MyPath2" d="M0,100 L200,100"/> </defs> <use href="#MyPath2" fill="none" stroke="red"/> <text text-anchor="middle" dx="100" dy="0" writing-mode="rl" direction="rtl"> <textPath href="#MyPath2"> הטקסט הזה ייראה הפוך </textPath> </text> </svg>