Изогнутый текст в реале (SVG textPath не работает)

Я ищу дугообразный заголовок в верхней части моей страницы React. Я хочу держаться подальше от JQuery, поэтому я использую SVG.Изогнутый текст в реале (SVG textPath не работает)

Это код, который я написал, который работает за пределами реакции:

<svg width='100%'> 
    <defs> 
     <path id="bigArc" d="m0,170 a800,800 0 0 1 800,0"/> 
    </defs> 
    <text x="200" fill='#003399' style="font-size: 80px;"> 
     <textPath xlink:href="#bigArc" > 
      Come on in... 
     </textPath> 
    </text> 
</svg>

Это мой нерабочим код внутри Реагировать возврата():

<svg width='500px'> 
    <defs> 
     <path id='bigArc' d='m0,170 a800,800 0 0 1 800,0'/> 
    </defs> 
    <text x='200' fill='#003399' style={{ fontSize: 80 }} > 
     <textPath xlinkHref='#bigArc' > 
      Come on in... 
     </textPath> 
    </text> 
</svg>

На данный момент мой React страница делает дисплей «Давай в ...» текст, но это не изогнутый. Кажется, что React пытается интерпретировать <textPath>.

Я не получаю никаких ошибок в консоли, и мой код действительно строит, но текст не следует по пути дуги.

Я использую ES6, реагирую 0.14.2 и реагирующую позицию^0.14.2.

источник

2015-11-18 Fernando

textPath в настоящее время не поддерживается, поэтому вам нужно прибегнуть к использованию dangerouslySetInnerHTML.

let textPath = `<textPath xlink:href="#bigArc">Come on in...</textPath>`; 
<text dangerouslySetInnerHTML={{__html: textPath }}></text>;

Demo

источник

2015-11-18 11:36:49

Спасибо за ваш ответ. Мне просто интересно, есть ли проблемы безопасности с 'dangerouslySetInnerHTML', поскольку это производственное приложение. Считаете ли вы, что это будет потенциальный риск XSS, или нет в этом случае? – Fernando

Да, это огромный риск для безопасности, особенно если вы вводите пользователя в свою переменную 'textPath', кроме этого, если это единственное, что вы делаете, и вы его дезинфицировали и проверили, вы должны будь умницей. http://facebook.github.io/react/tips/dangerously-set-inner-html.html –

так что проблема реагировать не имея полную поддержку SVG, который что-то до сих пор работают.

Может быть что-то вроде это помогло бы: https://github.com/facebook/react/issues/1657#issuecomment-70786561

я нету работал реагировать но то, что я мог собрать. Надеюсь, поможет.

источник

2015-11-18 12:03:22 zshnr

Спасибо, Зе. Это может сработать, но все еще немного обеспокоено XSS. Возможно, мне нужно спуститься по проспекту jQuery ... – Fernando

Для людей, читающих это сейчас, ReactJS имеет полную поддержку SVG с версии 15. Итак, элемент <textPath> должен работать должным образом.

Подробнее см. React v15.0 release notes.

источник

2016-04-11 08:19:17 Jeger

Изогнутый текст в реале (SVG textPath не работает)

ответ

Смежные вопросы