1

Я на сервере формирую динамически svg картинки такого формата

<?xml version="1.0" encoding="utf-8"?>
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<defs><style type="text/css">
  @font-face {
    font-family: 'antonio-bold';
    src: url('../../fonts/Antonio-Bold-webfont.eot'),
    url('../../fonts/Antonio-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../../fonts/Antonio-Bold-webfont.woff2') format('woff2'),
    url('../../fonts/Antonio-Bold-webfont.woff') format('woff'),
    url('../../fonts/Antonio-Bold-webfont.ttf') format('truetype'),
    url('../../fonts/Antonio-Bold-webfont.svg#antoniobold') format('svg');
    font-weight: normal;
    font-style: normal;
  }
</style>
</defs>
  <path fill="#A0A0A0" d="M 20 20 L 20 0 A 20 20 0 1 1 16 40 Z" />
  <path fill="#FFD33E" d="M 20 20 L 16 40 A 20 20 0 0 1 8 36 Z" />
  <path fill="#48CD3F" d="M 20 20 L 8 36 A 20 20 0 0 1 20 0 Z" />
  <circle cx="20" cy="20" r="18" stroke="#000000" stroke-width="4" fill="none" />
  <text font-family="antonio-bold" x="20" y="20" text-anchor="middle" font-size="14" dominant-baseline="middle" fill="#f26522">15</text>
</svg>

Картинка формируется, шрифт подтягивается.

Далее, я отдаю URL этой картинки в ArcGis. Он формирует свой <svg> контейнер, куда вставляет список <image>, которые через xlink ведут на мои картинки

<svg overflow="hidden" width="1330" height="396"
     style="transform: matrix(1, 0, 0, 1, 0, 0); width: 1330px; height: 396px;"
     >
    <defs></defs>
    <g transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)">
        <image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt"
               stroke-linejoin="miter" stroke-miterlimit="4" x="617.3333333333334" y="248.33333333333334"
               width="33.33333333333333" height="33.33333333333333" preserveAspectRatio="none"
               xlink:href="agg.svg?grey=4&amp;yellow=1&amp;green=7&amp;result&amp;" opacity="1"
               transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"></image>
      <image .....></image>
    </g>
</svg>

и вот эти <image> шрифты уже не подтягивают. Та же картина, если этот svg сохранить отдельным файлом.

Попытка импорта шрифтов через CSS, подключенным к странице эффекта не дала.

Собственно вопрос - как подтянуть шрифты?

Update

Вынес определение шрифтов в css, убрал их из <defs> и добавил

<?xml-stylesheet type="text/css" href="fonts.css"?>

Ничего не изменилось

Update2

Учитывая, что в новом варианте не подтягивается вся CSS, то не говорит ли это о том, что я нарвался на политику безопасности, согласно которой все импорты из импортируемых файлов запрещены?

2
  • а в логе сервера есть запросы этих шрифтов при загрузке? 6 июн 2019 в 17:56
  • @StrangerintheQ Нет. И в консоли хрома нет 6 июн 2019 в 18:00

1 ответ 1

1

Итак, в спецификации была найдена фраза

Since image references always refer to a complete document, a target-only URL is treated as a link to the same file, which is rendered again as an independent embedded image. Since the embedded image is processed in a secure mode, its own embedded references are not processed, preventing infinite recursion.

Поскольку ссылки на изображения всегда относятся к полному документу, целевой URL-адрес рассматривается как ссылка на тот же файл, который снова отображается как независимое встроенное изображение. Поскольку встроенное изображение обрабатывается в безопасном режиме, его собственные встроенные ссылки не обрабатываются, что предотвращает бесконечную рекурсию.

Т.е. про импорт шрифтов, CSS в импортируемых файлах можно забыть.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.