时间戳

首页 > 解决方案 > 自定义 React SVG 组件不在 iOS 上呈现，在桌面上呈现正常

ios - 自定义 React SVG 组件不在 iOS 上呈现，在桌面上呈现正常

问题描述

我刚刚制作了这个组件以避免在 React.js 中加载 SVG 图像，在这种情况下我想绘制自己的 SVG 按钮。不幸的是，我编写的组件在 Mac 或 PC 桌面上工作得很好（它呈现一个蓝色矩形），但在 iPhone 或 iPad 上却不行（试过 Safari 和 Chrome，在 iOS 上没有运气）。你能帮我吗？这是我正在测试的组件：

import React from 'react'

const Svg = (props) => {

    return(

        <svg
            viewBox = {`0 0 ${props.width} ${props.height}`}
        >

            <defs>

                <path
                    id = 'path-main'
                    d = {`
                    M 0, 0
                    L ${props.width}, 0
                    L ${props.width}, ${props.height}
                    L 0, ${props.height}
                    L 0, 0 z
                    `}
                />

            </defs>

            <g>

                <use
                    stroke = 'blue'
                    strokeWidth = '2'
                    fill = 'blue'
                    xlinkHref = '#path-main'
                />

            </g>

        </svg>

    )
}

export default Svg

这应该很简单，因为我还没有对它做任何特别的事情，我只是确保它可以跨设备和响应式地工作，但是很可惜，它没有。你知道我在这里想念什么吗？iOS不支持在运行时绘制的SVG吗？

顺便说一句，组件就是这样被调用的（很明显但仍然如此）：

<Svg
  width = '300px'
  height = '50px'
/>

谢谢

Edit1：作为记录，它也不会在 Mac Desktop Safari 上呈现，只是注意到了。

标签： iosreactjssvg

解决方案

因此，显然我在 svg 标记中编写的代码不够健壮，无法在所有浏览器上运行。我在 Sketch 中制作了一个新的简单 SVG 只是为了测试它，这个在所有浏览器中都正确显示。这将是我现在在所有浏览器中工作的测试组件：

import React from 'react'

const Svg = (props) => {

    return(

        <svg
            width = {props.width}
            height = {props.height}
            viewBox = {`0 0 ${props.width} ${props.height}`}
        >

            <g
                fill = '#B91799'
                fillRule = 'evenodd'
            >

                <path
                    d = {`
                    M 0, 0
                    L ${props.width}, 0
                    L ${props.width}, ${props.height}
                    L 0, ${props.height}
                    L 0, 0 z
                    `}
                />

            </g>
            
        </svg>

    )
}

export default Svg

编辑：正如罗伯特在下面提到的，请注意第一次尝试的问题是 svg 元素上缺少属性宽度和高度。

推荐阅读