Я создал SVG-меню для одностраничного сайта. Когда я использую меню с моего компьютера, все работает нормально, но когда я пытаюсь получить доступ с моего телефона, ссылки не работают. Я заметил, что проблема возникает, только если я использую относительные пути (я только связываюсь с идентификатором элемента), и с Iphones у меня нет никаких проблем с устройствами 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>