Закодированные символы отображаются нормально в HTML, но буквально отображаются в SVG.

У меня есть HTML-страница, на которой элемент SVG создается с помощью javascript.

Если я использую закодированные символы в HTML-части страницы, например µ/m³, они прекрасно отображаются как µ/m³.

Однако, когда я помещаю тот же текст в текстовый элемент SVG, на странице отображается буквальный текст µ/m³.

Кодировка всей страницы — UTF-8, и оба файла HTML и javascript сохраняются в кодировке UTF-8.

Любая идея о том, что здесь может происходить?

РЕДАКТИРОВАТЬ: я добавляю полный исходный код страницы после того, как javascript добавил часть SVG. Здесь происходит тот же эффект, страница правильно отображает закодированные символы непосредственно перед частью svg, но показывает их закодированными внутри кода svg.

    <head>
    <meta charset="utf-8">
    <title>Gráficas de calidad del aire</title>
    <link type="text/css" rel="stylesheet" href="../css/main.css">
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="../js/airQuality.js" type="text/javascript"></script>
    </head><body><div id="menu"><ul><li id="ultima" class="menuEle">Última medición global</li><li id="so2" title="Dióxido de sulfuro" class="menuEle selected">SO2</li><li id="no" title="Óxido de nitrógeno" class="menuEle">NO</li><li id="no2" title="Dióxido de nitrógeno" class="menuEle">NO2</li><li id="co" title="Monóxido de carbono" class="menuEle">CO</li><li id="pm10" title="Partículas en suspensión de menos de 10 micrómetros" class="menuEle">PM10</li><li id="o3" title="Ozono" class="menuEle">O3</li></ul></div>
	<div id="mainContainer">µg/m³
		<svg class="chart" width="1000" height="600"><g transform="translate(50, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M-6,580.5H0.5V5.5H-6"></path><g class="tick" opacity="1" transform="translate(0,580.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,498.3571428571429)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">50</text></g><g class="tick" opacity="1" transform="translate(0,416.2142857142857)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text></g><g class="tick" opacity="1" transform="translate(0,334.07142857142856)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">150</text></g><g class="tick" opacity="1" transform="translate(0,251.92857142857144)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">200</text></g><g class="tick" opacity="1" transform="translate(0,169.78571428571428)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">250</text></g><g class="tick" opacity="1" transform="translate(0,87.64285714285717)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">300</text></g><g class="tick" opacity="1" transform="translate(0,5.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">350</text></g></g><g transform="translate(0, 580)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M1000.5,6V0.5H50.5V6"></path><g class="tick" opacity="1" transform="translate(972.0568862275449,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(903.7934131736527,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Wed 13</text></g><g class="tick" opacity="1" transform="translate(835.5299401197605,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(767.2664670658683,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Tue 12</text></g><g class="tick" opacity="1" transform="translate(699.002994011976,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(630.7395209580839,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Mon 11</text></g><g class="tick" opacity="1" transform="translate(562.4760479041917,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(494.2125748502994,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Feb 10</text></g><g class="tick" opacity="1" transform="translate(425.9491017964072,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(357.68562874251495,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Sat 09</text></g><g class="tick" opacity="1" transform="translate(289.42215568862275,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(221.15868263473055,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Fri 08</text></g><g class="tick" opacity="1" transform="translate(152.89520958083833,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">12 PM</text></g><g class="tick" opacity="1" transform="translate(84.6317365269461,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Thu 07</text></g></g><g><text class="verticales" x="-285.89285714285717" y="10" transform="rotate(-90)">&amp;#181;g/m&amp;#179;</text></g><g><path d="M1000,566.5285714285715L1000,566.5285714285715L994.311377245509,563.0785714285714L988.622754491018,560.6142857142858L982.9341317365269,567.0214285714286L977.245508982036,567.5142857142857L971.5568862275449,567.1857142857143L965.868263473054,567.6785714285714L960.1796407185628,567.0214285714286L954.4910179640718,564.7214285714285L948.8023952095808,567.1857142857143L943.1137724550898,572.2785714285715L937.4251497005988,574.0857142857143L931.7365269461078,574.25L926.0479041916168,573.5928571428572L920.3592814371258,573.4285714285714L914.6706586826347,573.4285714285714L908.9820359281438,573.4285714285714L903.2934131736527,573.4285714285714L897.6047904191618,571.7857142857143L891.9161676646706,570.1428571428571L886.2275449101797,571.7857142857143L880.5389221556886,571.7857142857143L874.8502994011976,571.7857142857143L869.1616766467066,571.7857142857143L863.4730538922156,570.1428571428571L857.7844311377246,566.8571428571429L852.0958083832335,568.5L846.4071856287425,566.8571428571429L840.7185628742515,566.8571428571429L835.0299401197605,566.8571428571429L829.3413173652694,563.5714285714286L823.6526946107784,561.9285714285714L817.9640718562874,561.9285714285714L812.2754491017964,563.5714285714286L806.5868263473053,568.5L800.8982035928144,568.5L795.2095808383233,570.1428571428571L789.5209580838324,568.5L783.8323353293413,568.5L778.1437125748504,568.5L772.4550898203593,568.5L766.7664670658683,566.8571428571429L761.0778443113772,565.2142857142857L755.3892215568862,563.5714285714286L749.7005988023952,565.2142857142857L744.0119760479042,566.8571428571429L738.3233532934132,565.2142857142857L732.6347305389222,565.2142857142857L726.9461077844311,570.1428571428571L721.2574850299401,570.1428571428571L715.5688622754491,568.5L709.8802395209581,568.5L704.1916167664671,571.7857142857143L698.502994011976,570.1428571428571L692.814371257485,566.8571428571429L687.1257485029939,566.8571428571429L681.437125748503,566.8571428571429L675.7485029940119,568.5L670.059880239521,570.1428571428571L664.3712574850299,571.7857142857143L658.682634730539,571.7857142857143L652.9940119760479,571.7857142857143L647.3053892215569,571.7857142857143L641.6167664670659,571.7857142857143L635.9281437125749,571.7857142857143L630.2395209580839,573.4285714285714L624.5508982035929,571.7857142857143L618.8622754491017,571.7857142857143L613.1736526946108,568.5L607.4850299401197,563.5714285714286L601.7964071856288,561.9285714285714L596.1077844311377,563.5714285714286L590.4191616766467,568.5L584.7305389221557,568.5L579.0419161676646,568.5L573.3532934131737,566.8571428571429L567.6646706586826,568.5L561.9760479041917,568.5L556.2874251497005,570.1428571428571L550.5988023952096,571.7857142857143L544.9101796407185,570.1428571428571L539.2215568862275,570.1428571428571L533.5329341317365,568.5L527.8443113772455,570.1428571428571L522.1556886227545,570.1428571428571L516.4670658682635,568.5L510.7784431137724,570.1428571428571L505.0898203592814,565.2142857142857L499.4011976047904,565.2142857142857L493.7125748502994,566.8571428571429L488.0239520958084,568.5L482.33532934131733,561.9285714285714L476.6467065868263,566.8571428571429L470.9580838323353,566.8571428571429L465.2694610778443,566.8571428571429L459.5808383233533,568.5L453.8922155688623,575.0714285714286L448.20359281437123,576.7142857142857L442.5149700598802,576.7142857142857L436.8263473053892,576.7142857142857L431.1377245508982,576.7142857142857L425.4491017964072,575.0714285714286L419.7604790419162,575.0714285714286L414.0718562874252,575.0714285714286L408.3832335329341,576.7142857142857L402.6946107784431,576.7142857142857L397.0059880239521,576.7142857142857L391.3173652694611,576.7142857142857L385.62874251497004,576.7142857142857L379.94011976047904,576.7142857142857L374.251497005988,576.7142857142857L368.56287425149696,576.7142857142857L362.87425149700596,576.7142857142857L357.18562874251495,576.7142857142857L351.49700598802394,576.7142857142857L345.80838323353294,575.0714285714286L340.11976047904193,575.0714285714286L334.43113772455087,573.4285714285714L328.74251497005986,570.1428571428571L323.05389221556885,570.1428571428571L317.36526946107784,570.1428571428571L311.67664670658684,568.5L305.98802395209583,568.5L300.2994011976048,568.5L294.61077844311376,566.8571428571429L288.92215568862275,563.5714285714286L283.23353293413174,565.2142857142857L277.54491017964074,565.2142857142857L271.85628742514973,568.5L266.16766467065867,566.8571428571429L260.47904191616766,570.1428571428571L254.79041916167665,573.4285714285714L249.10179640718562,573.4285714285714L243.4131736526946,571.7857142857143L237.7245508982036,573.4285714285714L232.0359281437126,571.7857142857143L226.34730538922156,571.7857142857143L220.65868263473055,570.1428571428571L214.97005988023952,568.5L209.28143712574848,570.1428571428571L203.59281437125748,570.1428571428571L197.90419161676647,570.1428571428571L192.21556886227543,570.1428571428571L186.52694610778443,570.1428571428571L180.83832335329342,566.8571428571429L175.1497005988024,566.8571428571429L169.46107784431138,563.5714285714286L163.77245508982037,558.6428571428571L158.08383233532933,557L152.39520958083833,565.2142857142857L146.7065868263473,566.8571428571429L141.01796407185628,563.5714285714286L135.32934131736528,563.5714285714286L129.64071856287424,565.2142857142857L123.95209580838323,568.5L118.26347305389221,570.1428571428571L112.5748502994012,568.5L106.88622754491018,565.2142857142857L101.19760479041916,555.3571428571429L95.50898203592814,568.5L89.82035928143712,568.5L84.1317365269461,570.1428571428571L78.44311377245509,570.1428571428571L72.75449101796407,568.5L67.06586826347305,566.8571428571429L61.377245508982035,568.5L55.68862275449102,570.1428571428571L50,570.1428571428571" stroke="blue" stroke-width="2" fill="none"></path></g><g><rect x="50" y="5" width="970" height="1" stroke="red"></rect></g></svg>
	</div>


</body>


svg html character-encoding character-entities
person Bardo    schedule 13.02.2019    source источник
comment
Нам нужно увидеть javascript, я думаю, я подозреваю, что это ваша ошибка.   -  person Robert Longson    schedule 14.02.2019
comment
@RobertLongson В javascript есть хэш, который связывает элементы с единицами измерения myArray = { so: µ/m³, .....}; И я использую его для создания текстового узла svg через d3.js с чем-то вроде chart.add(text).attrib(blablabla, blablabla).text(myArray[currentElement]); Я постараюсь опубликовать соответствующий код, когда приеду домой.   -  person Bardo    schedule 14.02.2019
comment
Я начинаю думать, что это как-то связано с двойными кавычками... в предыдущем сообщении я заключил закодированный текст в двойные кавычки (как в коде javascript), и поэтому страница показала его как есть, а на странице html он не заключен в кавычки, а объекты разрешены.   -  person Bardo    schedule 14.02.2019
comment
Обходя вопрос, почему бы просто не использовать символы µ/m³ напрямую?   -  person Tom Blodget    schedule 14.02.2019
comment
@TomBlodget эти символы поступают из внешнего источника в открытых форматах данных и кодируются как объекты html.   -  person Bardo    schedule 14.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать selection.html("&#181;/m&#179;"). Это приводит к тому, что строка анализируется как XML, а сущности заменяются символами, которые они представляют.

Я знаю, что в документе d3 есть параграф, в котором говорится

Кроме того, selection.html поддерживается только для элементов HTML. Элементы SVG и другие элементы, отличные от HTML, не поддерживают свойство innerHTML и поэтому несовместимы с selection.html.

Это кажется очень старым текстом и больше не соответствует действительности, если только вы не хотите поддерживать такие браузеры, как IE‹=8 или Opera‹=12. Для всех других браузеров это работает.

person ccprog    schedule 14.02.2019