Ada yang mengerjakan ini? Saya ingin menerapkan tag filter .

preserveAspectRatio juga tampaknya hilang: http://jsfiddle.net/jonase/kb3gN/3025/

Haruskah saya membuat PR untuk ini atau apakah Anda lebih suka mengumpulkan semua atribut/tag yang hilang terlebih dahulu dan kemudian membuat satu tambalan?

[Sunting] melestarikanAspectRatio telah ditambahkan di komit https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

Hai.

atribut marker* telah ditambahkan berkat @cassus di #1738 seperti yang dinyatakan di atas.

Bagaimana dengan menambahkan elemen SVG <marker> ?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Saya baru sadar saya juga membutuhkan ini. Berikut ini ikhtisar yang bagus: http://tutorials.jenkov.com/svg/marker-element.html

Pendekatan "tambahkan elemen dan atribut acak di sana-sini saat 1 orang membutuhkannya" sudah tidak terkendali. Jadi kita perlu mendukung semuanya atau tidak sama sekali (atau sebagai alternatif menambahkan serangkaian hal yang masuk akal sekarang dan kemudian membeku di sana).

Saya menggores http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html untuk _hampir_ semuanya (tidak termasuk atribut namespaced) dan muncul dengan ini: https://github.com/zpao/ bereaksi/bandingkan/fuck-svg.

Namun itu menambahkan ~2kb ke build kami yang diperkecil (meskipun itu akan hancur dengan baik dengan kompiler penutupan) dan saya tidak ingin mengambil peningkatan ukuran itu sekarang. Kami telah berbicara tentang membuat SVG terpisah. Atau pengiriman itu secara terpisah sebagai tambahan.

@zpao Anda benar. Dukungan SVG penuh bisa menjadi tambahan. Untuk melakukannya, peringatan penyusutan perlu disetel untuk memberi tahu misalnya bahwa React.DOM.circle akan menjadi React.SVG.circle

+1 untuk React.SVG.circle

@zpao
Pengaya SVG lengkap terdengar seperti pendekatan yang bagus. Banyak proyek tidak memerlukan SVG, jadi kita tidak perlu membebani kode untuk mereka. Proyek lain perlu dan tidak masuk akal untuk hanya setengah jalan pada dukungan.

+1

2069 meminta dukungan untuk gambar.

+1 untuk dukungan gambar

+1 untuk dukungan gambar juga

+1 untuk dukungan <use> . Kami menggunakannya untuk set ikon svg kami. Kami mencoba dangerouslySetHTML untuk membuatnya bekerja, namun, bubbling acara tidak bekerja dengannya.

Hilang strokeDashoffset . Saya ingin menggunakannya untuk bilah kemajuan, seperti ini: http://codepen.io/JMChristensen/pen/Ablch

+1 untuk strokeDashoffset

juga ingin menggunakannya untuk bilah kemajuan.

Saya kehilangan alignment-baseline saat bekerja dengan <text>

Mungkin seseorang memiliki kemauan untuk menjelajah melalui http://www.w3.org/TR/SVG/Overview.html dan mendapatkan semua atribut dan properti? (Mungkin ada URL yang lebih baik untuk tujuan ini, tidak yakin...)

Bantuan lain adalah mengetahui di mana harus mengubah ini dalam kode sumber dan pengujian sehingga lebih mudah untuk membuat komit untuk bereaksi.

FWIW, sebagian besar atribut masih dapat diterapkan menggunakan atribut gaya.

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

@syranide Saya melakukan itu (kebanyakan otomatis karena itu gila jika dilakukan secara manual) - https://github.com/zpao/react/compare/fuck-svg. Lihat komentar saya sebelumnya tentang mengapa itu tidak baru saja digabungkan.

@ThomasDeutsch Lihat sebagian besar permintaan tarik terkait SVG sebelumnya. Yang mengatakan, saya lebih suka mencari tahu rencana daripada menambahkannya satu per satu (saya akan mengarahkan Anda ke komentar saya sebelumnya juga).

+1 untuk textPath - Saya membutuhkannya untuk proyek yang sedang saya kerjakan, dan saat ini saya sedang meretas solusi yang buruk. Saya akan dengan senang hati menyumbangkan implementasi ke paket plugin React SVG

:+1: untuk add-on SVG lengkap. Ada perkiraan kapan itu akan dikirim?

+1 untuk objek asing

+1 untuk objek asing

Atribut xlink:href untuk menggunakan sprite svg.

+1 untuk dukungan <use>

Saat ini menggunakan https://www.npmjs.org/package/react-inlinesvg sebagai solusi untuk ini.

Atribut: maskUnits & maskContentUnits (# 2056)

atribut topeng #2535

patternTransform

atribut teks text-anchor

+1 untuk textPath

+1 untuk <use> untuk penanganan ikon svg.

+1 untuk add-on SVG. Saat ini saya hanya membutuhkan <clipPath> untuk sebuah proyek, tetapi siapa yang tahu apa yang saya perlukan di masa depan. Pengaya yang komprehensif akan sangat membantu.

+1 untuk add-on.

Kami berencana untuk menggunakan SVG secara ekstensif dengan React, jadi add-on SVG lengkap untuk proyek seperti milik kami sepertinya ide yang bagus.

+1 untuk textPath dan dukungan svg lebih lengkap secara umum.

Sampai SVG didukung sepenuhnya, solusi yang layak adalah memberi tahu React atribut svg mana yang harus dilalui untuk merender dan mendeklarasikan elemen yang Anda butuhkan secara eksplisit. Misalnya, <use> dapat diakses seperti ini:

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 Hati-hati saat melakukan itu – React akan tetap memanggil setAttribute (bukan setAttributeNS) jika atribut berubah, dan pembaruan mungkin tidak akan berfungsi dengan baik.

@spicyj Saya tidak melihat dukungan namespace di React (yaitu, tidak ada panggilan ke setAttributeNS dalam basis kode). Adakah saran tentang cara yang tepat untuk mengatur atribut dengan namespace?

Kami belum menemukan cara kerja atribut namespace dan tidak mendukungnya sekarang, maaf.

vector-effect akan menyenangkan. Apakah ada cara lain untuk menjaga sapuan lebar tetap tanpa itu yang dapat digunakan untuk sementara?

+1 untuk objek asing

Hanya merujuk PR saya untuk atribut dasar teks: #2697

oh sial aku butuh tag use :kecewa:

Saya telah mengundurkan diri untuk menggunakan komponen khusus yang memiliki fungsi render yang kembali

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

Ini jelek, tapi berhasil.

:+1: tentang ini

+1 aktif untuk dukungan svg penuh di addons

:+1:

@zpao @spicyj apakah ada cara yang didukung untuk menambahkan elemen SVG individual ini ke Bereaksi tanpa menambal monyet ReactDOM dan SVGDOMPropertyConfig ?

Maaf tidak.

+1 untuk gambar dan objek asing

+1 untuk objek asing

animate tidak berfungsi dan mungkin beberapa atributnya: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Apa status mendukung SVG di addons? Baru ketemu hari ini :-(

cc @xymostech @MichelleTodd

+1 untuk atribut namespace.

+1 aktif untuk dukungan svg penuh di addons

+1000 untuk dukungan atribut SVG :-)

+1 untuk mendukungatribut

Permintaan untuk menambahkan atribut "fill-rule", mungkin sebagai "fillRule"

Juga ingin melihat addon SVG :+1:

React tim inti, apakah ada gerakan/diskusi di balik layar tentang ini?

Bukan pada ini secara khusus, tetapi #3718, #3763 keduanya merupakan hal SVG yang sedang dikerjakan dan #3067 juga terkait dengan perubahan atribut ini.

+1 untuk dukungan SVG penuh. Sebelum itu terjadi, saya memerlukan cara untuk membuat tag dan atribut khusus. Adakah yang bisa membantu saya dengan itu?

Elemen penanda juga tidak ada (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

@ersagunkuruca coba https://Gist.github.com/akre54/80eaa63762ea499029f0 untuk sementara

3945 Tag ini tidak didukung di React SVG untuk penanda: refx, refy,orient

:+1: untuk Penanda!

+1 untuk SVG semua hal.

:+1

bagaimana dengan dukungan untuk properti 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>

saat ini hanya berakhir dengan

<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 untuk gambar

+Semua SVG didukung

+1 untuk filter

+1 untuk penggunaan dukungan!

+1 untuk atribut namespace

+1 untuk dukungan atribut use dan filter

+1 untuk dukungan <image> . Saya perlu Bereaksi untuk membuat sebuah SVG inline yang memiliki gambar di dalam clipping path, dan itu semakin tergantung pada xmlns:xlink="http://www.w3.org/1999/xlink" attr di <svg> tag.

+1 untuk filter

Mempertimbangkan komentar @zpao , haruskah masalah ini dikunci? Atau setidaknya, bisakah kita memperbarui OP dengan informasi itu? Saya berlangganan utas untuk pembaruan tetapi komentar @zpao terkubur (bersama dengan fakta bahwa pekerjaan telah dilakukan) dan itu agak membingungkan bagi siapa saja yang belum membaca seluruh utas.

Komentar @zpao menjelaskan keputusan tentang mengapa saat ini tidak ada reaksi, tetapi apakah ada penjelasan yang lebih baik tentang mengapa addon tidak ada?
Apakah ini sesuatu yang masih bisa dieksplorasi?

+1 untuk penanda: refx, refy, orient

+1 untuk atribut teks: putar, garis dasar dominan

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

+1 tambahan

+1 tambahan

Sebenarnya React sedang dalam proses dipecah menjadi inti 'react' dan dom 'react-dom', dan saya kira di situlah 'react-svg' akhirnya akan masuk

+1 untuk penyaring.

tolong atribut vector-effect

Saya pikir orang yang meminta tag/atribut SVG ketika mereka membutuhkannya adalah model yang sangat buruk untuk Bereaksi. Konyol bahwa saya harus menggunakan dangerouslySetInnerHTML hanya untuk membuat SVG yang berfungsi pada halaman. Yang sedang berkata, inilah beberapa hal yang hilang:

_Tag:_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_Atribut:_

• filterUnits
• stdDeviation
• values
• in
• operator

dan mungkin lebih banyak lagi di kedua kategori. Itu hanya beberapa dari kode SVG spesifik yang saya kerjakan.

+1 untuk vector-effect

+1 untuk stdDeviation

+1 untuk React.SVG yang terpisah dan lengkap. Saya senang bekerja dengan SVG di React sejauh ini, tetapi ketidaklengkapan dukungan membuatnya tidak dapat digunakan untuk aplikasi semi-kompleks apa pun.

@spicyj memiliki rencana untuk menghilangkan kebutuhan akan konfigurasi terpisah yang perlu terus kami perbarui. Mudah-mudahan itu akan segera selesai. Sementara itu, tolong pegang erat-erat.

+1 untuk animateTransform

+1 untuk mendominasi-dasar (#3199.)

Seperti yang dikatakan @zpao , kami akan segera memperbaikinya agar atribut apa pun dapat digunakan.

Mengunci masalah ini sampai saat itu.

Ini diperbaiki di https://github.com/facebook/react/pull/5714 .

5714 dikembalikan di #6243, dan dengan demikian kami masih memerlukan daftar putih atribut. Namun, kabar baiknya adalah bahwa #6243 berisi atribut yang diambil untuk MDN, jadi kami mengharapkannya mencakup 95% kasus penggunaan . Saya membaca seluruh masalah ini dan menautkan masalah dan PR dan secara manual menambahkan dua properti yang hilang ( focusable dan vector-effect ) di #6267. Saya berharap perubahan ini akan terjadi di v15.

Menariknya, saya tidak yakin apakah daftar putih _tag_ relevan lagi. Sejauh ini saya telah dapat menggunakan <marker> , <textPath> , <feGaussianBlur> dan tag lain yang diminta dalam masalah ini dan di PR terkait tanpa masalah pada master. Saya melihat bahwa fbjs masih mempertahankan daftar putih tag SVG dan saya tidak tahu basis kode dengan cukup baik untuk mengatakan mengapa tag yang hilang darinya berfungsi untuk saya hari ini, jadi semoga @zpao atau @spicyj dapat mengklarifikasi ini, dan apakah kita juga perlu menambahkan tag yang hilang di sana, untuk melengkapi #6243.

Saya membuka kunci masalah ini karena daftar putih atribut masih relevan, tetapi mudah-mudahan kita akan melihat lebih sedikit permintaan sekarang karena sebagian besar atribut yang ada dalam spesifikasi dan diimplementasikan oleh browser, didukung. Jika ada sesuatu yang masih belum didukung di v15 final, beri tahu kami di sini.

Catatan ini tidak berlaku untuk v15 RC1 yang melewati semua atribut SVG.

Saya perhatikan bahwa tampaknya ada cukup banyak kebingungan tentang atribut xlink:href . Ini _is_ saat ini didukung tetapi Anda harus menulisnya dengan cara yang berbeda:

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

Bereaksi dengan benar akan mengubahnya menjadi xlink:href , bahkan dalam 0.14.x. Lihat biola ini untuk contoh.

Untuk kasus penggunaan saya, saya perlu Bereaksi untuk mengenali beberapa elemen filter seperti feFuncR , khususnya atributnya ( slope , intercept , dll). Tampaknya baik-baik saja di 15.0-rc2, tetapi untuk 0.14.x saya mengatasinya dengan menambahkan atribut ini ke kamus yang diekspor oleh react/lib/SVGDOMPropertyConfig sebelum mengimpor react / react-dom diri. Misalnya:

// 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;

Ini jelas merupakan peretasan tetapi saya merasa lebih baik daripada dangerouslySetInnerHTML

Meskipun ini berfungsi, ini bukan API yang diekspos secara resmi dan dapat rusak dalam rilis minor atau patch apa pun. Anda dapat menggunakannya tetapi dengan risiko Anda sendiri. Jika ada yang masih kurang silahkan bekerja sama dengan kami jadi kami menambahkannya. Saya senang mendengar Anda tidak memiliki masalah dengan 15 RC2.

Ya, tentu saja. Saya hanya menggunakan itu sampai 15 keluar dari status RC.

Cukup senang untuk (hampir) dukungan SVG penuh di v15.0 tetapi saya menyadari bahwa beberapa atribut dengan namespace seperti xmlns dan xmlnsXlink tidak dapat diterapkan saat render, dan ini tidak masalah saat ditampilkan svg di browser.

Jika Anda ingin membuat gambar .svg atribut tersebut diperlukan.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

Jadi melakukan kode di atas, tidak akan berhasil.

Mungkin terkait dengan fakta bahwa:

...berkat menggunakan document.createElement , kita tidak perlu lagi memelihara daftar tag SVG, jadi tag SVG apa pun yang sebelumnya tidak didukung akan berfungsi dengan baik di React 15

dan bukan document.createElementNS .

dan bukan document.createElementNS.

Entri blog sedikit terlalu disederhanakan, tetapi createElementNS digunakan saat kita berada di bawah tag <svg> . Jika ini tidak terjadi, bisakah Anda mengajukan masalah terpisah yang menjelaskan masalahnya, dengan JSFiddle yang mereproduksinya? Terima kasih!

Terima kasih @gaearon. Saya pikir itu terjadi ketika membuat svg di browser melalui ReactDOM . Mungkin masalahnya terkait dengan ReactDOMServer .

Berikut adalah pena yang menunjukkan SVG dirender dan kode yang dihasilkan melalui renderToStaticMarkup() mana tidak ada setidaknya xmlNS dan xmlnsXlink attrs.

Jika demikian, saya dapat mengajukan masalah ini secara terpisah.

Ya, xmlns dan xmlns:Xlink tidak ada. https://github.com/facebook/react/pull/6471 memiliki beberapa pekerjaan yang sedang berjalan untuk menambahkannya.

Saya masih tidak melihat <animate> dan <animateTransform> dalam daftar tag yang didukung. Apakah ada alasan Anda memilih untuk tidak mendukungnya?

@shilpan

Semua tag didukung sekarang. Daftar ini hanya memberi tahu tag mana yang didukung sebagai fungsi pabrik React.DOM.* :

Elemen SVG berikut didukung di React.DOM.*:

(penekanan milikku)

Jika Anda menggunakan BEJ, Anda tidak perlu khawatir sama sekali—menulis <animate> dan <animateTransform> hanya akan berfungsi karena JSX tidak bergantung pada pabrik React.DOM.* .

Bahkan jika Anda tidak menggunakan JSX, Anda dapat menggunakan React.createElement('animate', ...) yang akan bekerja dengan baik, atau membuat fungsi pabrik Anda sendiri: var animate = React.createFactory('animate") .

+1 untuk menambahkan dukungan untuk xmlns .... Sementara itu jika ada yang tertarik dengan solusi (yang saya perlukan untuk dapat mendukung IE9-11) inilah yang saya buat:

// 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}}/>