встроенные символы SVG не отображаются - PullRequest
0 голосов
/ 30 июня 2018

Я пытаюсь создать свой собственный SVG-шрифт, но он не рендерится. Используя код из примера Mozilla здесь https://developer.mozilla.org/en-US/docs/Web/SVG/Element/glyph Я написал это:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="640" height="346" viewBox="0 0 640 346">
  <defs>
    <font id="arial-hollow" horiz-adv-x="640">
      <font-face font-family="Arial-Hollow" font-weight="bold" font-style="normal" units-per-em="500" cap-height="300" x-height="200" ascent="350" descent="150" alphabetic="0" mathematical="175" ideographic="200" hanging="250">
        <font-face-src>
          <font-face-name name="Arial-Hollow"/>
        </font-face-src>
      </font-face>
      <glyph unicode="y" d="m 290.15467,345.00314 c -0.99838,-0.61637 -1.69965,-2.23572 -1.69965,-3.92482 0,-2.50765 0.35204,-2.8755 2.75182,-2.8755 1.5135,0 3.00684,-0.25593 3.31854,-0.56873 0.31171,-0.3128 -1.14514,-4.69641 -3.23743,-9.74136 -2.09229,-5.04495 -3.80416,-9.63645 -3.80416,-10.20334 0,-0.62947 1.9525,-0.91602 5.01577,-0.7361 4.94555,0.29048 5.03101,0.34919 6.1032,4.19319 1.15832,4.15281 1.83946,3.86929 2.92681,-1.21831 0.6524,-3.05249 0.85066,-3.1676 5.45598,-3.1676 2.62843,0 4.77897,0.41075 4.77897,0.9128 0,1.98567 -8.87091,24.97605 -10.12123,26.23077 -1.72468,1.73076 -9.29262,2.4547 -11.48862,1.099 z m 8.59567,-2.67299 c 1.58402,-1.06141 2.89916,-3.88879 6.66531,-14.32958 3.3272,-9.22389 3.35387,-9.41498 1.27187,-9.11243 -1.65647,0.24074 -2.46706,1.49296 -3.66669,5.66456 -2.14643,7.46397 -4.05584,7.47746 -6.29846,0.0446 -1.50399,-4.98488 -2.11995,-5.88738 -4.01815,-5.88738 l -2.24187,0 3.36686,8.01125 c 4.23089,10.06712 4.30363,12.27085 0.45319,13.72934 -1.60253,0.60702 -2.91369,1.44611 -2.91369,1.86464 0,0.96151 5.95103,0.97365 7.38163,0.015 z">
      </glyph>
    </font>
  </defs>
  <text x="100" y="100" font-family="Arial-Hollow">
    y  u no render??
  </text>
</svg>

https://codepen.io/anon/pen/YvdBzp

1 Ответ

0 голосов
/ 30 июня 2018

На странице разработчика Mozilla, на которую вы ссылаетесь, прямо вверху указано, что <glyph> устарела. Фактически, вся концепция SVG-шрифта больше не работает в современных браузерах, за исключением Safari.

...