Как в сделать белый кружочек?

Question

Вот макет

Вот то что получается

Интересует кастомизация зеленых кружочков.

Вот html

<line x1="15" y1="497" x2="15" y2="497" class="ct-point"></line>

Вот CSS

.static_chart .ct-point {
    stroke-width: 20px;
    stroke: #8fbf6e;
}

Как в зеленый кружочек добавить белый фон? Я не могу залезть в html, так как этот svg код генерирует плагин графиков. Как это можно решить только средствами CSS?

Answer 1

У неких сущностей в SVG есть marker и он может быть разный но в моём примере я применил один и тот же маркер для начала и конца и так же для средних точек

смотрим пример

<svg viewBox="0 0 640 200">
  <defs>
    <marker id="dot" viewBox="-1 -1 11 12" refX="5" refY="5" markerWidth="10" markerHeight="10">
      <circle cx="4.5" cy="5" r="5" fill="#fff" stroke="red" stroke-width="1" />
    </marker>
  </defs>
  <polyline points="20,180 100,150 150,100 250,120 300,180" fill="none" stroke="#000" stroke-width="2" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
</svg>

Answer 2

Удалось сделать только через Javascript. Пришлось белые кружочки с зеленой рамочкой разместить над зелеными точками графика. Но на IPhone это не сработало ((((

Answer 3

Немного теории для лучшего понимания решения:

Маркер может быть применен к <line>, <polyline>, <polygon>,<path>, <rect> то есть к любому элементу SVG, который имеет линии.
Начальный маркер marker-start="url(#mark)" прикрепляется к началу линии, конечный маркер marker-end="url(#mark)" к концу линии, marker-mid="url(#mark)" в точках излома линий.
Таких маркеров будет ровно столько, сколько раз линия меняет своё направление. Подробнее о параметрах, настройках, регулировках и применении маркеров здесь.
О возможных анимациях маркеров можно прочитать тут.

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

<circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />

Серая, координатная сетка создана с помощью pattern

Для облегчения понимания кода, читайте комментарии в коде:

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="520" height="320" viewBox="0 0 520 320" >  
<defs>
  <pattern id="patt"
             x="0" y="0" width="100" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#CACACA" fill-opacity="0.7">
             <rect x="0" y="0" width="100" height="30" />
            </g>
      </pattern>
      <marker id="mark" viewBox="0 0 22 24" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />
    </marker>
</defs> 

             <!-- Бледно-зелёный фон -->
<path fill="#F2F9F1" d="M22 264v-59l78-57 100-51 100 20 97 31 101-31v147z" />
                           <!-- сетка -->
<rect fill="url(#patt)" x="20" width="500" height="270" fill="none" stroke="grey" />
                   <!-- Линия графика -->
<polyline fill="none" stroke="green" stroke-width="2" points="20,210 100,150 200,100 300,120 400,150 500,120"  marker-end="url(#mark)" marker-start="url(#mark)" marker-mid="url(#mark)"  />
</svg>

В качестве бонуса, примеры анимации графика

          <!-- Анимация роста линии графика  -->
     <animate id="an" attributeName="stroke-dasharray" begin="svg1.click;an.end+1.5s"
         dur="4s" values="0,523;523,0" fill="freeze" />

<!-- https://ru.stackoverflow.com/q/1302705/28748 -->
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="520" height="320" viewBox="0 0 520 320" >  
<defs>          
             <!--Определение паттерна сетки -->
  <pattern id="patt"
             x="0" y="0" width="100" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#CACACA" fill-opacity="0.7">
             <rect x="0" y="0" width="100" height="30" />
            </g>
      </pattern> 
             <!--Определение формы маркера -->
      <marker id="mark" viewBox="0 0 22 24" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />
    </marker>
</defs> 

             <!-- Бледно-зелёный фон -->
<path fill="#F2F9F1" d="M22 264v-59l78-57 100-51 100 20 97 31 101-31v147z" />
                           <!-- сетка -->
<rect fill="url(#patt)" x="20" width="500" height="270" fill="none" stroke="grey" />
                   <!-- Линия графика -->

 <polyline fill="none" stroke="green" stroke-width="4" stroke-dasharray="0,523" points="20,210 100,150 200,100 300,120 400,150 500,120"> 
              <!-- Анимация роста линии графика  -->
     <animate id="an" attributeName="stroke-dasharray" begin="svg1.click;an.end+1.5s" dur="4s" values="0,523;523,0" fill="freeze" />
</polyline>

<polyline fill="none" stroke="green" stroke-width="2" stroke-dasharray="0,523" points="20,210 100,150 200,100 300,120 400,150 500,120"  marker-end="url(#mark)" marker-start="url(#mark)" marker-mid="url(#mark)"/> 

   <text x="50%" text-anchor="middle" y="22" font-size="24px" fill="green">Click me </text>
    
</svg>

Анимация рисования соединительных линий и маркеров

Используется анимация маски, которая прорезает маскирующую полосу, показывая тем самым линию графика с маркерами:

<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="520" height="320" viewBox="0 0 520 320" >  
<defs>          
             <!--Определение паттерна сетки -->
  <pattern id="patt"
             x="0" y="0" width="100" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#CACACA" fill-opacity="0.7">
             <rect x="0" y="0" width="100" height="30" />
            </g>
      </pattern> 
             <!--Определение формы маркера -->
      <marker id="mark" viewBox="0 0 22 24" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />
    </marker>   
              <!-- Анимированная маска -->
    <mask id="mask">
       <rect width="100%" height="100%" fill="white"/>
       <polyline fill="none" stroke="black" stroke-width="20" stroke-dashoffset="542" stroke-dasharray="542"  points="12,215 100,150 200,100 300,120 400,150 510,118">
     <animate id="an" attributeName="stroke-dashoffset" begin="svg1.click;an.end+1.5s" dur="5s" values="523;0" repeatCount="1" fill="freeze" />
    </mask>
</defs> 

             <!-- Бледно-зелёный фон -->
<path fill="#F2F9F1" d="M10 264v-49l90-67 100-51 100 20 97 31 114-35v151z" />
                           <!-- сетка -->
<rect fill="url(#patt)" x="20" width="500" height="270" fill="none" stroke="grey" />
 
 <!-- Линия графика -->
   
<polyline fill="none" stroke="green" stroke-width="2"   points="20,210 100,150 200,100 300,120 400,150 500,120"  marker-end="url(#mark)" marker-start="url(#mark)" marker-mid="url(#mark)"/>
     
</polyline>  
                   <!-- Маскирующая полоса того же цвета, как фон  -->
                     <!-- которая прорезается маской и показывается полоса графика stroke="green" -->
    <polyline fill="none" stroke="#F2F9F1"  mask="url(#mask)" stroke-width="20" points="11,216 100,150 200,100 300,120 400,150 509,117"/>
    </polyline> 
        <text x="50%" text-anchor="middle" y="22" font-size="24px" fill="green">Click me </text>
</svg>

БЛОГ НА HUSL

Как в сделать белый кружочек?

Ответы (3 шт):

В качестве бонуса, примеры анимации графика