Элегантный контур тени SVG для видимости (без использования фильтра) - PullRequest
Новая
       45

Элегантный контур тени SVG для видимости (без использования фильтра)

0 голосов
/ 13 февраля 2019

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

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

https://codepen.io/anon/pen/omMmRj

<svg id='mySvg' width="100mm" height="100mm">
   <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="none"></rect>
   <rect id="secondaryRect" x="25.5mm" y="25.5mm"  height="49mm" width="49mm" fill="none"></rect>
</svg>

body {
  background: white;
}
#hello{
  height: 200px;
  width: 200px;
  border: 1px solid white;
  margin-top:50px;
  margin-left:50px;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.55);
}

А вот пример вывода, который я ожидаю включитьэтот прямоугольник, используя div + shadow -> он выделяет белую рамку черным цветом, чтобы он был виден на любом фоне.Нужно найти способ сделать то же самое на SVG Rect без фильтра.

https://codepen.io/anon/pen/KJBEKG

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

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

body {
  background: green;
}
#hello{
  height: 200px;
  width: 200px;
  border: 1px solid white;
  margin-top:50px;
  margin-left:50px;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.55);
}
#mainRect{
    fill: none;
    stroke: white;
    stroke-width: 0.5mm;
    stroke-dasharray: 3mm;
}
#secondaryRect{
    stroke: #424242;
    stroke-width: 1mm;
    stroke-dasharray: 3mm;
}
<svg id='mySvg' width="100mm" height="100mm">
   <rect id="secondaryRect" x="25mm" y="25mm"  height="50mm" width="50mm" fill="none"></rect>
   <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="none"></rect>
</svg>
0 голосов
/ 13 февраля 2019

Одним из решений вашей проблемы было бы сделать два прямоугольника равным размеру и использовать штрих-черточку для одного из двух прямоугольников: 

#mySvg{
  border:1px solid black;
  background:orange;
}
#mainRect{
  stroke : white;
  stroke-width: .5mm;
  stroke-dasharray : 3.5mm;
}
#secondaryRect{
  stroke : black;
  stroke-width: .5mm;
  stroke-dasharray : 3.5mm;
  stroke-dashoffset : 3.5mm;
}
<svg id='mySvg' width="100mm" height="100mm">
  <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="none"></rect>
    <rect id="secondaryRect" x="25mm" y="25mm"  height="50mm" width="50mm" fill="none"></rect>
</svg>

Другим решением будет использование фильтров.Обратите внимание, что в этом случае я добавил fill = "orange" к вашему прямоугольнику. 

#mySvg{
  border:1px solid black;
  background:orange;
}
#mainRect{
  stroke : white;
  stroke-width: .5mm;

}
<svg id='mySvg' width="100mm" height="100mm">
  <filter id="outline">
<feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
<feComposite in="SourceGraphic"/>
</filter>
  <rect id="mainRect" x="25mm" y="25mm" height="50mm" width="50mm" fill="orange" filter="url(#outline)"></rect>   
</svg>
...