时间戳

首页 > 解决方案 > 编码字符在 HTML 上显示正常，但在 SVG 上显示

html - 编码字符在 HTML 上显示正常，但在 SVG 上显示

问题描述

我有一个 HTML 页面，其中一个 SVG 元素是通过 javascript 创建的。

如果我在页面的 HTML 部分使用编码字符，例如µ/m³，它会完美呈现为 µ/m³

但是，当我将相同的文本放入 SVG 文本元素时，文字µ/m³文本会显示在页面上。

整个页面编码为 UTF-8，HTML 和 javascript 文件都以 UTF-8 编码保存。

关于这里会发生什么的任何想法？

编辑：一旦javascript添加了SVG部分，我就会添加页面的完整源代码。这里发生了同样的效果，页面在 svg 部分之前呈现 ok 编码字符，但显示它们在 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>

标签： htmlsvgcharacter-encodingcharacter-entities

解决方案

您可以使用selection.html("&#181;/m&#179;"). 这会导致字符串被解析为 XML，并且实体被它们所代表的字符替换。

我知道 d3 文档中有一段说

此外， selection.html 仅在 HTML 元素上受支持。SVG 元素和其他非 HTML 元素不支持 innerHTML 属性，因此与 selection.html 不兼容。

这似乎是一个非常古老的文本，不再是真的，除非你想支持像 IE<=8 或 Opera<=12 这样的浏览器。对于所有其他浏览器，这都有效。

推荐阅读