Добавить тень к элементу SVG, например линии - PullRequest
Новая
       0

Добавить тень к элементу SVG, например линии

4 голосов
/ 23 сентября 2019

Так что я довольно новичок в SVG, но я начал играть с графиком.График от здесь .Я искал часы и нашел только половину решения моей проблемы.Как видно из фрагмента кода, если вы наводите курсор на график, он «светится».Но я хочу, чтобы при наведении на них светились только круги и «стыки».

То, что я пробовал:

  1. Использование обычного затенения CSS
  2. Использование кода, который «светит» график, но только на g элементах.
  3. Создание отдельного SVG одновременно: а) в основном SVG, б) отдельно и смешивание их с position: absolute.(после этого позиционирование работало странно)

Что мне нужно сделать, чтобы "круги" и суставы "светились"?

  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
  }

  html, body{
    height: 100%;
    width: 100%;  
  }

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
  body {
    font-family: 'Roboto Mono', monospace;
  }

  .graph .labels.x-labels {
    text-anchor: middle;
  }

  .graph .labels.y-labels {
    text-anchor: end;
  }

  .graph {
    height: 500px;
    width: 800px;
  }

  .graph .grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  .labels {
    font-size: 17px;
    font-weight: 400;
  }

  .label-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    fill: black;
  }

  .data {
    fill: #f86d36;
    stroke-width: 1;
  }

  .graph .dot-joints {
    stroke: #f86d36;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  svg:hover  {
    -webkit-filter: drop-shadow(0px 0px 4px #f86d36e8);
    filter: drop-shadow(0px 0px 4px #f86d36e8);
  }
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
    aria-labelledby="title" role="img">
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="90" y1="5" y2="371"></line>
    </g>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="705" y1="370" y2="370"></line>
    </g>
    <g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
            y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
            class="label-title">Year</text></g>
    <g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
            y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
    <g class="data" data-setname="Our first data set">
        <circle cx="95" cy="192" data-value="7.2" r="5"></circle>
        <circle cx="240" cy="141" data-value="8.1" r="5"></circle>
        <circle cx="388" cy="179" data-value="7.7" r="5"></circle>
        <circle cx="531" cy="200" data-value="6.8" r="5"></circle>
        <circle cx="677" cy="104" data-value="6.7" r="5"></circle>
    </g>
    <g class="dot-joints x-grid">
        <line x1="95" x2="240" y1="192" y2="141"></line>
        <line x1="240" x2="388" y1="141" y2="179"></line>
        <line x1="388" x2="531" y1="179" y2="200"></line>
        <line x1="531" x2="677" y1="200" y2="104"></line>
    </g>
</svg>

1 Ответ

3 голосов
/ 23 сентября 2019

Надеюсь, это то, что вам нужно: я использую svg-фильтр для тени.К вашему коду я добавил .data circle:hover{filter:url(#f)} для отдельных кружков и .dot-joints.x-grid:hover{filter:url(#f)} для группы строк: 

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
  }

  html, body{
    height: 100%;
    width: 100%;  
  }

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
  body {
    font-family: 'Roboto Mono', monospace;
  }

  .graph .labels.x-labels {
    text-anchor: middle;
  }

  .graph .labels.y-labels {
    text-anchor: end;
  }

  .graph {
    height: 500px;
    width: 800px;
  }

  .graph .grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  .labels {
    font-size: 17px;
    font-weight: 400;
  }

  .label-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    fill: black;
  }

  .data {
    fill: #f86d36;
    stroke-width: 1;
  }
  .data circle:hover{filter:url(#f)}

  .graph .dot-joints {
    stroke: #f86d36;
    stroke-dasharray: 0;
    stroke-width: 3;
  }
  
  .dot-joints.x-grid:hover{filter:url(#f)}
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
    aria-labelledby="title" role="img">
    <defs>
    <filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
      <feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
      <feFlood flood-color="rgba(0,0,0,.52)" result="color" />
      <feComposite in ="color" in2="shadow" operator="in" />
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="90" y1="5" y2="371"></line>
    </g>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="705" y1="370" y2="370"></line>
    </g>
    <g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
            y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
            class="label-title">Year</text></g>
    <g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
            y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
    <g class="data" data-setname="Our first data set">
        <circle cx="95" cy="192" data-value="7.2" r="5"></circle>
        <circle cx="240" cy="141" data-value="8.1" r="5"></circle>
        <circle cx="388" cy="179" data-value="7.7" r="5"></circle>
        <circle cx="531" cy="200" data-value="6.8" r="5"></circle>
        <circle cx="677" cy="104" data-value="6.7" r="5"></circle>
    </g>
    <g class="dot-joints x-grid" >
        <line x1="95" x2="240" y1="192" y2="141"></line>
        <line x1="240" x2="388" y1="141" y2="179"></line>
        <line x1="388" x2="531" y1="179" y2="200"></line>
        <line x1="531" x2="677" y1="200" y2="104"></line>
    </g>
</svg>

В качестве альтернативы вы можете использовать это вместо: 

svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}

При наведении курсора на элемент svg примените тень к линиям и окружностям. 

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
  }

  html, body{
    height: 100%;
    width: 100%;  
  }

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
  body {
    font-family: 'Roboto Mono', monospace;
  }

  .graph .labels.x-labels {
    text-anchor: middle;
  }

  .graph .labels.y-labels {
    text-anchor: end;
  }

  .graph {
    height: 500px;
    width: 800px;
  }

  .graph .grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  .labels {
    font-size: 17px;
    font-weight: 400;
  }

  .label-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    fill: black;
  }

  .data {
    fill: #f86d36;
    stroke-width: 1;
  }


  .graph .dot-joints {
    stroke: #f86d36;
    stroke-dasharray: 0;
    stroke-width: 3;
  }
  
    svg:hover .data,
    svg:hover .dot-joints.x-grid{filter:url(#f)}
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
    aria-labelledby="title" role="img">
    <defs>
    <filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
      <feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
      <feFlood flood-color="rgba(0,0,0,.52)" result="color" />
      <feComposite in ="color" in2="shadow" operator="in" />
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="90" y1="5" y2="371"></line>
    </g>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="705" y1="370" y2="370"></line>
    </g>
    <g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
            y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
            class="label-title">Year</text></g>
    <g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
            y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
    <g class="data" data-setname="Our first data set">
        <circle cx="95" cy="192" data-value="7.2" r="5"></circle>
        <circle cx="240" cy="141" data-value="8.1" r="5"></circle>
        <circle cx="388" cy="179" data-value="7.7" r="5"></circle>
        <circle cx="531" cy="200" data-value="6.8" r="5"></circle>
        <circle cx="677" cy="104" data-value="6.7" r="5"></circle>
    </g>
    <g class="dot-joints x-grid" >
        <line x1="95" x2="240" y1="192" y2="141"></line>
        <line x1="240" x2="388" y1="141" y2="179"></line>
        <line x1="388" x2="531" y1="179" y2="200"></line>
        <line x1="531" x2="677" y1="200" y2="104"></line>
    </g>
</svg>

ОБНОВЛЕНИЕ

ОП комментирует:

Можете ли вы объяснить это немного подробнее

В <defs> я добавил фильтр SVG.Этот фильтр сначала создает размытие feGaussianBlur.Возможно, вам придется изменить stdDeviation, чтобы изменить аспект тени.

Далее происходит смещение ранее созданного размытия feOffset: вам может потребоваться изменить атрибуты dx="3" и dy="1", чтобы переместить тень.

Затем feFlood и feComposite используются для добавления цвета к тени.В этом случае я использую полупрозрачный черный, но вы можете использовать нужный вам цвет.

Я использую этот фильтр, чтобы применить тень только к тем элементам, которые вы хотите: filter:url(#f) - где f - этоидентификатор фильтра

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...