Текстовые элементы SVG не отображаются на диаграмме

Я пытаюсь динамически создать круговую диаграмму, используя простой ванильный JavaScript и SVG, и я хочу, чтобы у нее были всплывающие подсказки, которые появляются при наведении курсора на каждый сектор круговой диаграммы, характерный для конкретного фрагмента. Я могу заставить его работать, если вставлю узел <title>, но я не могу настроить <title> с помощью CSS, чтобы он выглядел красиво.

Итак, я пытаюсь найти обходной путь, используя текст SVG, но я не могу отобразить текстовые поля. Я попытался поместить группу, содержащую поле всплывающей подсказки и текст, как до, так и после путей фрагмента круга, но это не работает в любом случае.

Когда я захожу в инспектор, я вижу, что группа с всплывающей подсказкой создается и отображается в бэкэнде, но я не вижу их на отображаемой странице. Может кто-то указать мне верное направление? Я думаю, что это может быть как-то связано с преобразованием для группы, но я пробовал разные настройки, и это не исправляет. Я не уверен, что я делаю неправильно в этот момент. Я создал CodePen с тем, что у меня есть: https://codepen.io/tho1379/pen/MWjMKQV


javascript svg charts css
person user15071802    schedule 24.01.2021    source источник
comment
Я думаю, что текст слишком большой. Проверьте свою систему координат и размер шрифта.   -  person Robert Longson    schedule 24.01.2021
comment
@RobertLongson Я попытался изменить размер шрифта, но, к сожалению, текстовые поля не появились. Когда я попытался настроить поле просмотра, круговая диаграмма исчезла, и я увидел часть текстовых полей, но независимо от того, как я настраиваю преобразование, поля обрезаются. Кроме того, я до сих пор не могу отобразить круговую диаграмму и текстовые поля. Итак, это должно быть наслоение, но я в тупике, как это исправить. :(   -  person user15071802    schedule 24.01.2021
comment
ваш viewBox крошечный, ваше преобразование для всплывающей подсказки огромно, то есть в 200 раз больше размера viewBox.   -  person Robert Longson    schedule 24.01.2021
comment
@RobertLongson Думаю, я неправильно понимаю, как работает преобразование. Я изменил размер окна просмотра на 0 0 1000 1000, и теперь круговая диаграмма уменьшилась до размера точки. И теперь я вижу свои текстовые поля (все они, кажется, наслаиваются друг на друга), но я не понимаю, почему они в 200 раз больше диаграммы? Я думал, что преобразование›перевод должно было отодвинуть текстовое поле в сторону?   -  person user15071802    schedule 24.01.2021
comment
@RobertLongson Думаю, я понял! Поскольку поле просмотра установлено на 2, обычный размер текста увеличивается непропорционально. Итак, два новых вопроса: 1) Почему я не могу увеличить окно просмотра, не потеряв при этом свою диаграмму (как упоминалось в моем предыдущем комментарии, когда я пытаюсь сделать окно просмотра 1000x1000, диаграмма становится настолько маленькой, что я даже не могу видеть Это)? 2) Если вы снова посмотрите на CodePen, желтое текстовое поле теперь отображается для всех фрагментов, кроме ванильного — почему это происходит?   -  person user15071802    schedule 24.01.2021
comment
1) Потому что это то, что делает viewBox. См. stackoverflow. ком/вопросы/15335926/   -  person Robert Longson    schedule 24.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Атрибут viewBox определяет положение и размер области просмотра SVG в пользовательском пространстве. В случае viewBox=-1 -1 2 2 ширина порта просмотра составляет 2 единицы пользователя, а высота также равна 2. Графика начинается с x=-1 и y=-1.

Между тем ваш текст имеет размер шрифта: .9rem (вероятно, 14,4 единицы)

Чтобы решить эту проблему, я разделил текст на другую группу. Я поместил piePaths в символ с viewBox=0 0 2 2. Поскольку мне не нужен символ с отрицательными координатами, я траблирую piePaths transform=translate(1,1)
Далее я используя символ: <use xlink:href="#pie" width="200" height="200"/> Это увеличит круг (200/200)

Теперь вы можете видеть текст, но он весь перекрывается. Я оставлю вам перевод каждой подсказки там, где она вам нужна.

Как наблюдение: бессмысленно использовать z-index в svg. Чтобы поместить фигуру сверху, вы рисуете эту фигуру в конце документа.

.myPie {
  width: 90%;
  margin: 2rem auto;
}

/*
svg {
  width: 100%;
}
*/

/* testing
.piePath {
  visibility: hidden;
}
*/

.piePath .tooltip {
  /*z-index: 1000;
  visibility: hidden;*/
}


path {
  opacity: 0.6;
}


.piePath:hover .tooltip {
 visibility: visible;
}

.piePath:hover path {
  opacity: 1;
  cursor: pointer;
}

.tooltip text {
    fill: black;
    font-size: 0.9rem;
    font-family: sans-serif;
}
.tooltip rect {
    fill: Cornsilk;
    stroke: Gray;
}
<div class="myPie">
  <svg viewBox="0 0 200 200" style="transform: rotate(-90deg)">
    <symbol id="pie" viewBox="0 0 2 2">
      <g transform="translate(1,1)">
    <g class="piePath">
      <path d="M 1 0 A 1 1 0 0 1 0.4600650377311522 0.8878852184023752 L 0 0" fill="MediumPurple" id="1"></path>
      
    </g>
    <g class="piePath">
      <path d="M 0.4600650377311522 0.8878852184023752 A 1 1 0 0 1 -0.7757112907044198 -0.6310879443260528 L 0 0" fill="PaleVioletRed" id="2"></path>
      
    </g>
    <g class="piePath">
      <path d="M -0.7757112907044198 -0.6310879443260528 A 1 1 0 0 1 -0.5766803221148672 -0.816969893010442 L 0 0" fill="MediumSeaGreen" id="3"></path>

    </g>
    <g class="piePath">
      <path d="M -0.5766803221148672 -0.816969893010442 A 1 1 0 0 1 -0.06824241336467135 -0.9976687691905392 L 0 0" fill="SteelBlue" id="4"></path>
     
    </g>
    <g class="piePath">
      <path d="M -0.06824241336467135 -0.9976687691905392 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" fill="Coral" id="5"></path>
      
    </g>
    </g>
    </symbol>
    
   <use xlink:href="#pie" width="200" height="200"/>
    
    <g id="text">
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Vanilla</text>
      </g>
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Chocolate</text>
      </g>
       <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Pistachio</text>
      </g>
       <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Strawberry</text>
      </g>
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Maple Walnut</text>
      </g>
      
    </g>
  </svg>
</div>

person enxaneta    schedule 24.01.2021
comment
Спасибо за это! Я не знаком с xlink - пойду искать. :) - person user15071802; 25.01.2021