tspan

Issue with SVG tspans not aligning with text-anchor=“end”

由 杀马特。学长 韩版系。学妹 提交于 2020-01-21 14:44:29
问题 I have a bit of code like this: svg {font-family:Verdana,sans-serif;color:#000;} .key {font-size:75%;overflow:visible;} .caphgh {font-weight:bold;} .keynor {font-weight:normal;} .keysub {font-weight:normal;font-size:85%;} .keyshf,.keyctl,.keyalt {text-anchor:end;} .keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270) blue */ .keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150) green */ .keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30) red */ .yel {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */ .non

hyperlink in tspan (SVG) not shown

由 拟墨画扇 提交于 2019-12-12 02:24:42
问题 working on Javascript to chatroom message with tspan. Original: this function add name and content text to tspan for each of the items in svg function showMessage(nameStr, contentStr, color){ var node = document.getElementById("chattext"); // Create the name text span var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); // Set the attributes and create the text nameNode.setAttribute("x", 100); nameNode.setAttribute("dy", 20); nameNode.setAttribute("fill", color);

ng-bind-html in a svg text tag do not display tspan in firefox and IE

由 柔情痞子 提交于 2019-12-11 12:22:12
问题 I can't succeed in build an svg with angularjs when tspan are load from ng-bind-html attribute, Firefox and IE do not display them. My controler look like that : $scope.titlenotok="svg not ok"; var content = '<tspan dy="20" x="0" xml:space="preserve">line1 not ok</tspan><tspan dy="30" x="0" xml:space="preserve">line 2 not ok</tspan>' $scope.notok = $sce.trustAsHtml(content); I create a fiddle to illustrate http://jsfiddle.net/3WNhT/ For chrome it's OK. 回答1: Robert was right. Here is my

Svg text tspan isn't doing as it's told

由 不打扰是莪最后的温柔 提交于 2019-12-10 21:30:01
问题 I took a big SVG apart and found this weird glitch (fiddle here) <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> <text> <tspan x="0" y="1em" z-index="300">Word1</tspan> <tspan x="0" dy="1em">Word2</tspan> </text> </svg> With a single line of CSS: svg { text-transform: uppercase; } Gives the wrong word wrapping: WORD1 W ORD2 Kind of solved my own question but will leave it here in

Calculating vertical height of a SVG text

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-09 09:13:42
问题 I have an array of strings. Say, ['Jan 11','Feb 11'] And i am creating a vertical text with these string like so <text x="60" y="154" text-anchor="middle" style="text-anchor: middle; font: normal normal normal 12px/normal Helvetica, Arial; " font="12px Helvetica, Arial" stroke="none" fill="#ffffff" transform="rotate(90 59.75 150)"> <tspan>Jan 11</tspan> </text> After the svg has been rendered i find that the height of the text is 36px. Now is there a way to calculate the height of a text that

Align lines of text to center in SVG

由 泄露秘密 提交于 2019-12-03 11:26:51
问题 I need to output multiple lines of text in SVG. For that I'm using the following scheme: <text> <tspan> First line </tspan> <tspan> Second line </tspan> </text> First and second line of the text can have different number of characters, which can change dynamically. I want the second line to appear under the first line and text in both of them to be centered. I can make second line appear below the first line by adding dy="15" for the second <tspan> . I can align the text in each individual

Align lines of text to center in SVG

由 纵饮孤独 提交于 2019-12-03 04:11:35
I need to output multiple lines of text in SVG. For that I'm using the following scheme: <text> <tspan> First line </tspan> <tspan> Second line </tspan> </text> First and second line of the text can have different number of characters, which can change dynamically. I want the second line to appear under the first line and text in both of them to be centered. I can make second line appear below the first line by adding dy="15" for the second <tspan> . I can align the text in each individual <tspan> by adding text-anchor="middle" to it. But how to do relative centric alignment of those <tspan>
订阅 tspan