Атрибут трафарета и SVG xlink-href - PullRequest
Новая
       5

Атрибут трафарета и SVG xlink-href

1 голос
/ 25 марта 2020

В Stencil 1.8.0 этот код работал: 

<svg>
  <use xlinkHref="#some-icon"/>
</svg>

недавно Stencil был обновлен до 1.11, и упомянутый код перестал работать. Когда я попытался построить проект, я получил ошибку Typescript, говоря: 

Type '{ xlinkHref: string; }' is not assignable to type 'SVGAttributes<SVGElement>'.
Property 'xlinkHref' does not exist on type 'SVGAttributes<SVGElement>'.

Я искал вокруг и обнаружил, что xlinkHref был переименован в xlink-href (ссылка)

Если я изменю код на: 

<svg>
  <use xlink-href="#some-icon"/>
</svg>

, процесс сборки проходит без ошибок, но затем в консоли браузера я получаю: 

DOMException: Failed to execute 'setAttributeNS' on 'Element': The qualified name 
provided ('-href') contains the invalid name-start character '-'.
    at setAccessor (http://localhost:3334/build/index-a8bdf364.js:618:25)
    at updateElement (http://localhost:3334/build/index-a8bdf364.js:646:9)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:695:13)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)
    at createElm (http://localhost:3334/build/index-a8bdf364.js:705:29)

Я не нашел любые примеры или документация по этому вопросу.

Может кто-нибудь сказать мне, как это исправить?

1 Ответ

1 голос
/ 26 марта 2020

Я получил ответ благодаря Максу из чата Stencil на Slack. Это временное исправление, пока исправление работает. 

import { JSXBase } from '@stencil/core/internal';

    // render()
    type SVG2Attributes = JSXBase.SVGAttributes & { href: string };

    // @ts-ignore
    const link = <use href="example" /> as SVG2Attributes;

    return (
      <svg>
        {link}
      </svg>
    );
...