Кто-нибудь работает над этим? Я бы очень хотел реализовать тег filter .

preserveAspectRatio похоже, тоже отсутствует: http://jsfiddle.net/jonase/kb3gN/3025/

Должен ли я создать PR для этого или вы предпочитаете сначала собрать все недостающие атрибуты / теги, а затем создать один патч?

[править] preserveAspectRatio был добавлен в коммит https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

Привет.

Атрибуты marker * были добавлены благодаря @cassus в # 1738, как указано выше.

А как насчет добавления связанного элемента <marker> SVG?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Я только что понял, что мне это тоже нужно. Вот хороший обзор: http://tutorials.jenkov.com/svg/marker-element.html

Такой подход «добавлять случайный элемент и атрибут здесь и там, когда это нужно одному человеку» вышел из-под контроля. Так что нам нужно либо поддерживать все, либо ничего (или, в качестве альтернативы, время от времени добавлять разумный набор вещей, а затем замораживать его).

Я скопировал http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html для _почти_ всего (не считая атрибутов в пространстве имен) и придумал следующее: https://github.com/zpao/ реагировать / сравнивать / ебать-svg.

Однако это добавляет ~ 2 КБ к нашей минифицированной сборке (хотя она будет хорошо работать с закрывающим компилятором), и я не хочу сейчас увеличивать этот размер. Мы говорили о создании отдельной сборки SVG. Или отправьте это отдельно в качестве дополнения.

@zpao ты прав. Полная поддержка SVG может быть дополнением. Для этого необходимо настроить предупреждение об амортизации, чтобы, например, сообщать, что React.DOM.circle станет React.SVG.circle

+1 за React.SVG.circle

@zpao
Полноценное дополнение SVG звучит как хороший подход. Многие проекты не нуждаются в SVG, поэтому нам не следует утяжелять код для них. Другие проекты нуждаются в поддержке, и нет смысла идти только на полпути.

+1

2069 запрашивает поддержку изображения.

+1 за поддержку изображений

+1 также для поддержки изображений

+1 за поддержку <use> . Мы используем это для нашего набора значков svg. Мы пытаемся dangerouslySetHTML чтобы он заработал, однако всплытие событий с ним не работает.

Отсутствует strokeDashoffset . Я хочу использовать его для индикатора выполнения, например: http://codepen.io/JMChristensen/pen/Ablch

+1 за strokeDashoffset

также хочу использовать его для индикатора выполнения.

Мне не хватает alignment-baseline при работе с <text>

Может быть, у кого-то хватит силы воли пролезть через http://www.w3.org/TR/SVG/Overview.html и получить все атрибуты и свойства? (Для этой цели может быть лучший URL, не уверен ...)

Еще одна помощь - это знать, где это изменить в исходном коде и тестах, чтобы было легче сделать фиксацию для реакции.

FWIW, большинство атрибутов все еще можно применить с помощью атрибута style.

<path style={{strokeDashoffset: 100}} />

@syranide Я сделал это (в основном автоматически, потому что было бы безумием делать это вручную) - https://github.com/zpao/react/compare/fuck-svg. См. Мой предыдущий комментарий о том, почему это уже не слито.

@ThomasDeutsch См. Большинство предыдущих запросов на вытягивание, связанных с SVG. Тем не менее, я лучше разработаю план, чем добавлю их по одному (я также направлю вас к своему предыдущему комментарию).

+1 для textPath - мне он нужен для проекта, над которым я сейчас работаю, и прямо сейчас я взламываю неприятное решение. Я был бы счастлив внести свой вклад в реализацию пакета плагинов React SVG.

: +1: для полноценного дополнения SVG. Есть ли предположения о том, когда это будет отправлено?

+1 для foreignObject

+1 для foreignObject

Атрибут xlink:href для использования svg-спрайтов.

+1 за поддержку <use>

В настоящее время для решения этой проблемы используется

Атрибуты: maskUnits и maskContentUnits (# 2056)

Атрибут маски # 2535

patternTransform

текстовый атрибут text-anchor

+1 для textPath

+1 за <use> за обработку значков svg.

+1 для надстройки SVG. В настоящее время мне нужно только <clipPath> для проекта, но кто знает, что мне понадобится в будущем. Было бы очень полезно исчерпывающее дополнение.

+1 за надстройку.

Мы планируем широко использовать SVG с React, поэтому полноценное дополнение SVG для таких проектов, как наш, кажется отличной идеей.

+1 за textPath и более полную поддержку svg в целом.

До тех пор, пока SVG не будет полностью поддерживаться, достойным решением будет сообщить React, какие атрибуты svg он должен передать для рендеринга и явного объявления элементов, которые вам нужны. Например, к <use> можно получить доступ следующим образом:

var DOMProperty = require('react/lib/DOMProperty');

// xlink:href is not a standardly-supported svg attribute, but you can tell
// React that it is ok.
DOMProperty.injection.injectDOMPropertyConfig({
  isCustomAttribute: function (attributeName) {
    return (attributeName === 'xlink:href');
  }
});

var SvgButton = React.createClass({
  render: function render() {
    var use = React.createElement('use', {
      'xlink:href': '#' + this.props.icon
    });
    return (
      <button>
        <svg>
          { use }
        </svg>
        <div>{ this.props.label }</div>
      </button>
    );
 });

@jeffkole Будьте осторожны при этом - React по-прежнему будет вызывать setAttribute (не setAttributeNS), если атрибут изменится, и обновление, вероятно, не будет работать должным образом.

@spicyj Я не вижу поддержки пространства имен в React (т.е. в кодовой базе нет вызова setAttributeNS ). Любое предложение о правильном способе установки атрибута с пространством имен?

Мы не выяснили, как будут работать атрибуты пространства имен, и сейчас не поддерживаем это, извините.

vector-effect было бы неплохо. Есть ли другой способ сохранить штрихи фиксированной ширины без него, который можно было бы использовать тем временем?

+1 для foreignObject

Ссылаюсь на мой PR для атрибутов базовой линии текста: # 2697

черт возьми, мне нужно use tag: разочарован:

Я смирился с использованием пользовательского компонента с функцией рендеринга, возвращающей

<svg dangerouslySetInnerHTML={{ __html: '<use xlink:href="#' + this.props.icon + '"/>' }} />

Это некрасиво, но работает.

: +1: об этом

+1 для полной поддержки svg в аддонах

: +1:

@zpao @spicyj есть ли поддерживаемый способ добавления этих отдельных элементов SVG в React без обезьяньего исправления ReactDOM и SVGDOMPropertyConfig ?

Извините но нет.

+1 для изображения и foreignObject

+1 для foreignObject

animate не работает и, возможно, некоторые его атрибуты: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Каков статус поддержки SVG в аддонах? Только сегодня столкнулся с этим :-(

Копия @xymostech @MichelleTodd

+1 для атрибутов с именами.

+1 для полной поддержки svg в аддонах

+1000 за поддержку атрибутов SVG :-)

+1 за поддержкуатрибуты

Запрос на добавление атрибута fill-rule, может быть как fillRule

Также хотелось бы увидеть аддон SVG: +1:

Основная команда React, есть ли какие-нибудь закулисные движения / обсуждения по этому поводу?

Не об этом конкретно, но # 3718, # 3763 - это объекты SVG, над которыми мы работаем, и # 3067 также связано с этим изменением атрибутов.

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

Также отсутствует элемент маркера (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

@ersagunkuruca тем временем попробуйте https://gist.github.com/akre54/80eaa63762ea499029f0

3945 Эти теги не поддерживаются в React SVG для маркеров: refx, refy, orient

: +1: для маркеров!

+1 за все SVG.

: +1

как насчет поддержки свойств animateTransform

<path
    d="M120 60c0-31.13-26.86-60-60-60">
    <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 60 60"
          to="360 60 60"
          dur="1.5s"
          repeatCount="indefinite" />
</path>

в настоящее время просто заканчивается

<path d="M120 60c0-31.13-26.86-60-60-60" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2">
    <animateTransform type="rotate" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2.0"></animateTransform>
</path>

+1 к изображению

+ Поддерживаются все SVG

+1 за фильтр

+1 за поддержку использования!

+1 для атрибутов с именами

+1 для поддержки атрибутов use и filter

+1 за поддержку <image> . Мне нужен React для рендеринга встроенного SVG, в котором есть изображение внутри обтравочного контура, и он зависает на xmlns:xlink="http://www.w3.org/1999/xlink" attr в теге <svg> .

+1 за filter

Учитывая комментарий @zpao , следует ли заблокировать эту проблему? Или, по крайней мере, можем ли мы обновить OP этой информацией? Я подписан на ветку для получения обновлений, но комментарий

Комментарий @zpao объясняет решение о том, почему он в настоящее время не встроен в react, но есть ли лучшее объяснение того, почему аддон не существует?
Это то, что еще можно изучить?

+1 за маркер: refx, refy, orient

+1 для атрибутов текста: поворот, доминирующая-базовая линия

http://www.w3.org/TR/SVG/text.html#TextElementRotateAttribute

+1 аддон

+1 аддон

На самом деле React находится в процессе разделения на ядро ​​«react» и dom «react-dom», и я предполагаю, что именно здесь, наконец, появится «react-svg».

+1 за фильтр.

vector-effect атрибут пожалуйста

Я думаю, что люди, запрашивающие теги / атрибуты SVG, когда они им нужны, - очень плохая модель для React. Глупо, что мне приходится использовать dangerouslySetInnerHTML только для рендеринга рабочего SVG на странице. При этом кое-чего не хватает:

_Теги: _

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_Атрибуты: _

• filterUnits
• stdDeviation
• values
• in
• operator

и, вероятно, многое другое в обеих категориях. Это лишь некоторые из конкретного кода SVG, с которым я работаю.

+1 за vector-effect

+1 за stdDeviation

+1 за отдельный и полный React.SVG. Мне пока нравится работать с SVG в React, но неполнота поддержки делает его неприемлемым для любого полусложного приложения.

У @spicyj есть план по устранению необходимости в отдельной конфигурации, которую мы должны постоянно обновлять. Надеюсь, это скоро будет завершено. А пока, пожалуйста, держитесь крепче.

+1 за animateTransform

+1 для доминирующего базового уровня (# 3199.)

Как сказал @zpao , мы скоро исправим это навсегда, чтобы можно было использовать любые атрибуты.

Блокировка этой проблемы до тех пор.

Это было исправлено в https://github.com/facebook/react/pull/5714.

5714 был отменен в # 6243, поэтому нам по-прежнему нужен белый список атрибутов. Однако хорошей новостью является то, что # 6243 содержит атрибуты, очищенные для MDN, поэтому мы ожидаем, что он охватит 95% случаев использования . Я прочитал всю эту проблему и связал проблемы и PR и вручную добавил два недостающих свойства ( focusable и vector-effect ) в # 6267. Я ожидаю, что эти изменения появятся в версии 15.

Интересно, что я не уверен, актуален ли белый список _tag_. До сих пор я мог без проблем использовать <marker> , <textPath> , <feGaussianBlur> и другие теги, запрошенные в этой проблеме и в связанных PR на главном сервере. Я вижу, что fbjs прежнему поддерживает белый список тегов SVG, и я недостаточно хорошо знаю кодовую базу, чтобы сказать, почему отсутствующие в ней теги сработали для меня сегодня, поэтому, надеюсь, @zpao или @spicyj могут прояснить это, и будут ли нам также нужно добавить туда недостающие теги, чтобы дополнить # 6243.

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

Это примечание не относится к версии 15 RC1, которая передает все атрибуты SVG.

Я заметил, что по поводу атрибута xlink:href похоже, довольно много путаницы. Он _is_ в настоящее время поддерживается, но вам нужно будет написать его по-другому:

<use xlinkHref="#shape" x="50" y="50" />

React правильно превратит это в xlink:href , даже в 0.14.x. См. Пример на этой скрипке .

В моем случае мне нужно, чтобы React распознавал некоторые элементы фильтра, такие как feFuncR , в частности их атрибуты ( slope , intercept и т. Д.). Кажется, это нормально в 15.0-rc2, но для 0.14.x я работал над этим, добавляя эти атрибуты в словарь, экспортированный react/lib/SVGDOMPropertyConfig перед первым импортом react / react-dom сам. Например:

// Needed to set correct xmlns on <svg> and to preserve attributes on feFunc*.
// Required for 0.14.x. May become unnecessary with 15.x

var SVGDOMPropertyConfig = require("react/lib/SVGDOMPropertyConfig");

var DOMProperty = require("react/lib/DOMProperty");
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;

SVGDOMPropertyConfig.Properties.in = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.intercept = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.slope = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.xmlns = MUST_USE_ATTRIBUTE;

var React = require("react");
var render = require("react-dom").render;

Очевидно, что это взлом, но я считаю его предпочтительнее, чем dangerouslySetInnerHTML

Хотя это работает, это не официально открытый API, и он может сломаться в любом второстепенном выпуске или выпуске исправлений. Вы можете использовать его, но на свой страх и риск. Если чего-то по-прежнему не хватает, поработайте с нами, чтобы мы это добавили. Я рад слышать, что у вас нет проблем с 15 RC2.

Да, конечно. Я использую это только до тех пор, пока 15 не выйдут из статуса RC.

Довольно доволен (почти) полной поддержкой SVG в версии 15.0, но я понимаю, что некоторые атрибуты пространства имен, такие как xmlns и xmlnsXlink не могут применяться при рендеринге, и это нормально при отображении svg в браузере.

Если вы хотите создать изображение .svg эти атрибуты необходимы.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

Таким образом, выполнение приведенного выше кода не сработает.

Вероятно, это связано с тем, что:

... благодаря использованию document.createElement нам больше не нужно поддерживать список тегов SVG, поэтому любые теги SVG, которые ранее не поддерживались, должны нормально работать в React 15

а не document.createElementNS .

а не document.createElementNS.

Сообщение в блоге слишком упрощено, но createElementNS используется, когда мы находимся под тегом <svg> . Если этого не произошло, не могли бы вы подать отдельную проблему с описанием проблемы с помощью JSFiddle, который ее воспроизводит? Спасибо!

Спасибо @gaearon. Я думаю, что это действительно происходит при рендеринге svg в браузере через ReactDOM . Вероятно, проблема связана с ReactDOMServer .

Вот перо, которое показывает визуализированный SVG и код, сгенерированный с помощью renderToStaticMarkup() где отсутствуют как минимум xmlNS и xmlnsXlink attrs.

В таком случае я мог бы подать этот вопрос отдельно.

Да, xmlns и xmlns:Xlink отсутствуют. https://github.com/facebook/react/pull/6471 ведется работа по его добавлению.

Я по-прежнему не вижу <animate> и <animateTransform> в списке поддерживаемых тегов. Есть ли причина, по которой вы решили не поддерживать его?

@shilpan

Теперь поддерживаются все теги. В списке указано только, какие теги поддерживаются как фабричные функции React.DOM.* :

В React.DOM. * Поддерживаются следующие элементы SVG

(курсив мой)

Если вы используете JSX, вам вообще не нужно об этом беспокоиться - написание <animate> и <animateTransform> будет работать, потому что JSX не полагается на React.DOM.* фабрики.

Даже если вы не используете JSX, вы можете использовать React.createElement('animate', ...) который будет работать нормально, или создать свою собственную фабричную функцию: var animate = React.createFactory('animate") .

+1 за добавление поддержки для xmlns .... Между тем, если кто-то заинтересован в обходном пути (который мне нужен для поддержки IE9-11), вот что я придумал:

// explicitly build the SVG to be rendered here so we don't lose the NS
const stringifiedSvg = `<svg xmlns="http://www.w3.org/2000/svg" class="svgClass">
                               <use xlink:href="#linkToSymbolId"></use>
                        <svg/>`

return <div dangerouslySetInnerHTML={{__html: stringifiedSvg}}/>