相对路径链接在 iPhone 中不起作用

Question

我为单页网站创建了一个 SVG 菜单。当我使用计算机上的菜单时，一切正常，但当我尝试从手机访问时，链接不起作用。我注意到，只有当我使用相对路径（我只链接到元素的 Id）时才会出现此问题，对于 iPhone，我在 Android 设备上没有任何问题。我的问题是，如果我使用绝对路径，我会丢失滚动行为动画（平滑）。

我不知道这是否是我的 SVG 的问题，或者我根本无法在 iPhone 中使用相对路径。

这是我的项目的链接：http://portfolio-2019-cg.herokuapp.com

我正在使用 React 创建这个网站。

    <div>
    <svg className="circle" width="611px" onClick={this.showMenu} height="883px" viewBox="0 0 611 883" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <path id='menu' className={this.state.activeclass} d="M611,473 L611,708 C611,804.649831 532.649831,883 436,883 L269,883 L60,883 C26.862915,883 1.11635499e-14,856.137085 7.10542736e-15,823 L1.08387875e-15,473 L-1.42108547e-14,60 C-1.82689772e-14,26.862915 26.862915,6.08718376e-15 60,0 L551,0 C584.137085,-6.08718376e-15 611,26.862915 611,60 L611,473 Z" id="Combined-Shape" fill="#FF531B"></path>
            <circle id="Oval" fill="#FF531B" cx="436" cy="708" r="175"></circle>
            <path className={this.state.plusclass} onClick={this.showMenu} d="M486,658.5 L561.5,658.5 L561.5,758.5 L486,758.5 L486,834 L386,834 L386,758.5 L310.5,758.5 L310.5,658.5 L386,658.5 L386,583 L486,583 L486,658.5 Z" id="Combined-Shape" fill="#080815"></path>
            <g className={this.state.menuclass}>
            <text id="HOME" fontSize="94" fontWeight="normal" fill="#080815">
            <a xlinkHref="#home">
            <tspan x="205.181641" y="140">Home</tspan>
            </a>
            </text>
            <text id="ABOUT" fontSize="94" fontWeight="normal" fill="#080815">
            <a xlinkHref="#about">
            <tspan x="176.977051" y="270">About</tspan>
            </a>
            </text>
            <text id="PORTFOLIO" fontSize="94" fontWeight="normal" fill="#080815">
            <a xlinkHref="#portfolio">
            <tspan x="64.1586914" y="400">Portfolio</tspan>
            </a>
            </text>
            <text id="CONTACT" fontSize="94" fontWeight="normal" fill="#080815">
            <a xlinkHref="#contact">
            <tspan x="120.567871" y="530">Contact</tspan>
            </a>
            </text>
            </g>
        </g>
    </svg>  
</div>

Answer 1

我也遇到了同样的问题，相关链接在装有 Safari 或 Chrome 的 iPhone 上不起作用，但在我的电脑上却工作得很好。你找到解决办法了吗？