Блог

Главная - Вопросы по программированию - Добавление встроенных меток к горизонтальной полосе с помощью чистого SVG

Добавление встроенных меток к горизонтальной полосе с помощью чистого SVG

#svg

#svg

Вопрос:

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

   <svg class="chart" width="300px" height="40">
        <g transform="translate(0,0)">
            <rect width="82%" height="22" fill="lightskyblue"></rect>
            <rect width="100%" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
            <text y="30" dx="0.25em" dy=".35em">0</text>
            <text x="20%" y="10" dy=".35em" fill="red">|</text>
            <text x="20%" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
            <text x="100%" y="30" dx="-1.25em" dy=".35em">63</text>
        </g>
    </svg>

Это то, что у меня есть сейчас:

введите описание изображения здесь

И это то, что я хочу:

введите описание изображения здесь

Ответ №1:

Чтобы заставить это работать, я использую ваш код как вложенный svg внутри элемента svg большего размера. Пожалуйста, обратите внимание, что я использую атрибут viewBox, где компонент x имеет отрицательное значение (-50), освобождая место для текста.

 svg{border:solid;}  
 <svg class="chart" width="300px" viewBox="-50 0 400 40">
  <text y="20" x="-45">TXT</text>
  <text x="345" y="20" text-anchor="end">TXT</text>
    <svg viewBox="0 0 300 40" width="300">
        <rect width="82%" height="22" fill="lightskyblue"></rect>
        <rect width="100%" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
        <text y="30" dx="0.25em" dy=".35em">0</text>
        <text x="20%" y="10" dy=".35em" fill="red">|</text>
        <text x="20%" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
        <text x="100%" y="30" dx="-1.25em" dy=".35em">63</text>
  </svg>
 </svg>

Я должен сказать вам, что я бы не стал указывать проценты для положения и размера прямоугольников. Я бы сделал это, используя пользовательские единицы измерения (без идентификатора единицы измерения), и мне не нужно было бы переносить его в другой элемент svg.

Обновить

OP комментирует

Можете ли вы привести другой пример, без процентов для положения и размера прямоугольников и без переноса его в другой элемент svg

 svg{border:solid}  
 <svg class="chart" width="300px" viewBox="-50 0 400 40">
  <text y="20" x="-45">TXT</text>
  <text x="345" y="20" text-anchor="end">TXT</text>
    
        <rect width="246" height="22" fill="lightskyblue"></rect>
        <rect width="300" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
        <text y="30" dx="0.25em" dy=".35em">0</text>
        <text x="60" y="10" dy=".35em" fill="red">|</text>
        <text x="60" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
        <text x="300" y="30" dx="-1.25em" dy=".35em">63</text>
  <svg>

Комментарии:

1. Спасибо! Можете ли вы привести другой пример, без процентов для положения и размера прямоугольников и без переноса его в другой элемент svg, пожалуйста?

2. Большое вам спасибо!