MDN nói rằng xlink:href
không được ủng hộ href
. Bạn sẽ có thể sử dụng href
thuộc tính trực tiếp. Ví dụ dưới đây bao gồm cả hai phiên bản.
Kể từ React 0.14 , xlink:href
có sẵn thông qua React là tài sản xlinkHref
. Nó được đề cập như một trong những "cải tiến đáng chú ý" trong ghi chú phát hành cho 0.14.
<!-- REACT JSX: -->
<svg>
<use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>
<!-- RENDERS AS: -->
<svg>
<use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>
Cập nhật 2018-06-09: Đã thêm thông tin về href
vs xlink:href
thuộc tính và ví dụ cập nhật để bao gồm cả hai. Cảm ơn @devuxer
Cập nhật 3 : Tại thời điểm viết, các thuộc tính SVG của React có thể được tìm thấy ở đây .
Cập nhật 2 : Dường như tất cả các thuộc tính svg nên có sẵn thông qua phản ứng (xem PR thuộc tính svg được hợp nhất ).
Cập nhật 1 : Bạn có thể muốn theo dõi vấn đề liên quan đến svg trên GitHub để có thêm hỗ trợ SVG. Có sự phát triển trong các công trình.
Bản giới thiệu:
const svgReactElement = (
<svg
viewBox="0 0 1340 667"
width="100"
height="100"
>
<image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
{ /* Deprecated xlink:href usage */ }
<image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
</svg>
);
var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);
ReactDOM.render(svgReactElement, document.getElementById('render-result') );
function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>
<h2>Render result of rendering:</h2>
<pre><svg
viewBox="0 0 1340 667"
width="100"
height="100"
>
<image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
{ /* Deprecated xlink:href usage */ }
<image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
</svg></pre>
<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>
Đối với khách truy cập trong tương lai, bây giờ bạn có thể sử dụng
– Đỗ Anh Hoàng 21:56:05 15/11/2016<use xlinkHref="/svg/svg-sprite#my-icon" />
.
– Ngô Hạnh Chi 18:50:16 23/11/2017xlink:href
không được dùng nữa, hiện được cho là chỉ sử dụnghref
- developer.mozilla.org/en-US/docs/Web/SVG/Attribution/xlink:href@MattGreer Tính đến năm 2018, Safari vẫn cần
– Vũ Ngọc Trà 09:54:31 27/02/2018xlink:href
nên chúng tôi vẫn cần sử dụng. Các ứng dụng web thực tế cần sử dụng mẫu số chung của các tính năng trình duyệt hoặc triển khai các cách giải quyết / polyfill cụ thể.Tôi chỉ thêm nhận xét này để giúp những người khác tìm kiếm lỗi này, đã được giải quyết bằng câu trả lời của Jon Surrell bên dưới:
– Trần Hồng Lĩnh 18:35:44 12/10/2018Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>