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>

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

0 个答案: