Почему моя функция щелчка не работает внутри этого SVG на мобильных устройствах, а на настольном компьютере? - PullRequest
Новая
       1

Почему моя функция щелчка не работает внутри этого SVG на мобильных устройствах, а на настольном компьютере?

0 голосов
/ 10 декабря 2018

У меня есть две простые функции JS, показанные в этом фрагменте: 

function ReplaceHeader(id,content) {
          var container = document.getElementById(id);
          container.innerHTML = content;
          }

 function ReplaceContent(id,content) {
          var container = document.getElementById(id);
          container.innerHTML = content;
          }
.st0 {
            fill: #C6C8AB;
          }
          .st1 {
            clip-path: url("#SVGID_2_");
            fill: #C6C8AB;
          }
          .st2 {
            fill: #5362FF;
          }
          .st3 {
            fill: #2A4D5C;
          }
          .st4 {
            font-family: 'HalisR-Bold';
          }
          .st5 {
            font-size: 10px;
          }
          .st6 {
            enable-background: new;
          }
          .st7 {
            fill: none;
            stroke: #C6C8AB;
            stroke-width: 3;
          }
          .st8 {
            clip-path: url("#SVGID_4_");
            fill: none;
            stroke: #C6C8AB;
            stroke-width: 3;
            stroke-miterlimit: 10;
          }

path.active {
    stroke: #5362FF;
    stroke-width: 8px;
    paint-order: stroke;
    stroke-linejoin: round;
}
text.active tspan {
    fill: #5362FF !important;
}

.gd-globe a:hover > path {
    stroke: #5362FF;
    stroke-width: 8px;
    paint-order: stroke;
    stroke-linejoin: round;
}

.gd-globe a:hover > text tspan, .gd-globe a:hover > text {
    fill: #5362FF !important;
}
<div class="gd-globe">
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve">
        <!-- Click replace content JS -->
        
        <rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/>
        <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/>
        <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/>
        <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/>
        <rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/>
        <rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/>
        <rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/>
        <g>
          <defs>
            <rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/>
          </defs>
          <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
          </clipPath>
          <path
            class="st1"
            d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6
          c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6
          C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6
          c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2
          c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/>
        </g>
        <path
          class="st2"
          d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2
        c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7
        c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33
        c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244
        c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/>
        
        <!-- Social Entrepreneurs -->
        <a href="javascript:ReplaceHeader('header','Social Entrepreneurs'); javascript:ReplaceContent('content','some content'); ">
          <path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0
        C324.6,147.5,327.7,150.6,331.4,150.6"/>
          <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6">
            <tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan>
            <tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan>
          </text>
        </a>

      </svg>
    </div>

<h5 id="header" class="h2" style="font-size:18px; text-align:left;">header</h2>
        <span class="copy" id="content">title</span>

и некоторые href с функцией inline.Hrefs вокруг SVG.Я создал Codepen со всем кодом:

https://codepen.io/maniac123/pen/PXovZq

При нажатии на href, это должно изменить значения в h2 с идентификатором "header" и диапазоном сid "content".

Все это прекрасно работает на настольном компьютере, но на устройстве iPhone и Android оно не вытягивает значения.H2 и span не меняются.

1 Ответ

0 голосов
/ 10 декабря 2018

Проблема возникает из javascript:someFunction SVG не является проблемой.
Кажется, что javascript:someFunction работает не во всех браузерах.
Это означает, что от этого страдает не только мобильный телефон.
Пожалуйста, взгляните на: a href = javascript: function () в Firefox не работает .
Здесь также интересно: Функция JavaScript в href и onclick .

Чтобы ответить на ваш вопрос, я бы использовал onlick, показанный ниже: 

// Made the functions to 1 function because the content was the same
function ReplaceContent(id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;    
}
<a href='#' onclick='
ReplaceContent("header", "New header")
ReplaceContent("text", "More Lorem ipsum...")
' >test</a>
<h2 id='header'>Header</h2>
<p id='text'>
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Я считаю, что следующий фрагмент более понятен для повторного использования: 

function LinkReplace() {
  // Now you do not need to fiddle in the HTML for JS functions
  ReplaceContent("header", "New header")
  ReplaceContent("text", "More Lorem ipsum...")
}

function ReplaceContent(id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;    
}
<a href='#' onclick='LinkReplace()' >test</a>
<h2 id='header'>Header</h2>
<p id='text'>
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

С SVG: 

function LinkReplace() {
  // Now you do not need to fiddle in the HTML for JS functions
  ReplaceContent("header", "New header")
  ReplaceContent("text", "More Lorem ipsum...")
}

function ReplaceContent(id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;    
}
.st0 {
  fill: #C6C8AB;
}
.st1 {
  clip-path: url("#SVGID_2_");
  fill: #C6C8AB;
}
.st2 {
  fill: #5362FF;
}
.st3 {
  fill: #2A4D5C;
}
.st4 {
  font-family: 'HalisR-Bold';
}
.st5 {
  font-size: 10px;
}
.st6 {
  enable-background: new;
}
.st7 {
  fill: none;
  stroke: #C6C8AB;
  stroke-width: 3;
}
.st8 {
  clip-path: url("#SVGID_4_");
  fill: none;
  stroke: #C6C8AB;
  stroke-width: 3;
  stroke-miterlimit: 10;
}

path.active {
    stroke: #5362FF;
    stroke-width: 8px;
    paint-order: stroke;
    stroke-linejoin: round;
}
text.active tspan {
    fill: #5362FF !important;
}

.gd-globe a:hover > path {
    stroke: #5362FF;
    stroke-width: 8px;
    paint-order: stroke;
    stroke-linejoin: round;
}

.gd-globe a:hover > text tspan, .gd-globe a:hover > text {
    fill: #5362FF !important;
}
<div class="gd-globe">
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve">
        
        <rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/>
        <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/>
        <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/>
        <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/>
        <rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/>
        <rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/>
        <rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/>
        <g>
          <defs>
            <rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/>
          </defs>
          <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
          </clipPath>
          <path
            class="st1"
            d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6
          c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6
          C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6
          c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2
          c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/>
        </g>
        <path
          class="st2"
          d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2
        c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7
        c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33
        c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244
        c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/>
        
        <!-- Social Entrepreneurs -->
        <a href='#' onclick='LinkReplace()'>
          <path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0
        C324.6,147.5,327.7,150.6,331.4,150.6"/>
          <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6">
            <tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan>
            <tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan>
          </text>
        </a>

      </svg>
    </div>

<h2 id='header'>Header</h2>
<p id='text'>
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...