Css box shadow svg path

Illustrative example of converting HTML box shadow into SVG code using paths

If you desire SVG drop-shadows, you will need to employ a polyfill or incorporate the drop-shadow directly into the SVG. In brief, SVG drop-shadows lack consistency, whereas HTML drop-shadows function reliably (except in IE11).

How to add box-shadow to a svg path circle shape

To create an attractive box-shadow, modify the feGaussianBlur attribute. Here is the code that will generate a visually pleasing box-shadow. Review the output to see the result.

Please note that the dimension of the circle has been increased in order to properly view the shadow. However, you can adjust it according to your specific needs.

I have updated the box shadow as you requested, by adding the desired background color.

I have implemented this feature on one of my websites, and it functions properly for me.

.booking-view-tariff-circle > img < border: 2px solid #fff; border-radius: 50%; box-shadow: 2px 2px 4px #000; display: block; height: 80px; width: 80px; margin-left: auto; margin-right: auto; object-fit: cover; position: relative; left: -45px; top: -78px; box-shadow: 0 8px 8px rgba(0,0,0,0.54); 

SVG Gradients, The id attribute of the tag defines a unique name for the gradient. The x1, x2, y1,y2 attributes of the tag define the start and end position of the gradient. The color range for a gradient can be composed of two or more colors. Each color is specified with a tag. The offset attribute is …

How to apply drop-shadow filter via CSS to SVG specific element/path

In April 2020, I conducted experiments to address the lack of information on this issue, and the findings were highly variable.

In terms of consistency, SVG drop-shadows are unreliable, while HTML drop-shadows consistently function (excluding IE11). To achieve SVG drop-shadows, a polyfill must be used or the drop-shadow can be applied directly within the SVG.

Here is a Codepen experiment that can be accessed at http://codepen.io/staypuftman/pen/GoNoMq.

Chrome 81 + Canary 83:

Both Chrome and Edge Canary fail to properly respect filter or -webkit-filter when applied to an SVG object drop-shadow, although they do function correctly on a basic div .

Firefox 75 + Firefox 53 (pre-quantum):

It appears visually appealing for both SVG and HTML elements.

Safari 13+

Safari briefly incorporated dropshadows in previous versions, but subsequently removed them once more.

Safari 10.1 - 11

The issue has been resolved in Safari's 10.1 (and possibly 10.0) series.

Safari 9.x

The dropshadow in SVG CSS is not visible, and the dropshadow for div appears to have reduced opacity for unknown reasons.

Edge (Chromium version)

SVG dropshadows are not available, but the HTML ones function effectively.

IE11

To selectively apply a shadow, perform color selection on the desired object, generate the shadow, and merge it beneath the original graphic. However, this process can only be accomplished through the SVG filter trapdoor in CSS Filters, which is incompatible with Internet Explorer. Thus, it is a somewhat unconventional but feasible workaround.

The specification can be found at w3.org/TR/SVG11/filters.html#feColorMatrixElement.

You can find the demo toy at this link: https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices.

The opacity of all red values is doubled by the matrix, while the opacity of everything else is set to zero and then subtracted by 1. This results in only items with the RGB values of (255,0,0) being left at 100% opacity.

In this CodePen, I introduced various drop-shadows to path and text which are dynamically generated. I discovered a cross-browser solution that can be applied to a class , instead of #robbie img (as mentioned in the second link).

In my initial CodePen comment, I suggested an alternative approach that doesn't rely on utilizing the classes. Instead, it makes use of #numbers_dropshadows_filter and #strokes_dropshadows_filter as defined in .

How can I add a box-shadow on one side of an element?, I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow:hidden; so the three other sides of the shadow are not visible.. Is there some better way to achieve this? …

Get bounding box of SVG path

To obtain the bounding box of your path using pure JavaScript, assign it an ID and use getBBox() .

var myPathBox = document.getElementById("myPath").getBBox(); console.log(myPathBox); 

var myPathBox = document.getElementById("myPath").getBBox(); console.log(myPathBox);

Although this is an outdated matter, I wanted to add this alternative to Furtado's response for future reference.

Obtain the bounding box for the path effortlessly. """.

1. Ensure that the path, or any other SVG element, includes an identifier.
2. Access the svg file in Chrome (or FF or possibly IE). """.
3. Inspect the image
4. Access the inspection tool's console.
5. Execute the JavaScript code: document.getElementById("myPath").getBBox(), where "myPath" represents the id.

The console will display the information of the bounding box.

The approach remains unchanged, eliminating the necessity for personalized coding.

CSS box-shadow property, The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Demo . v-offset. Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. Demo .

Overflow: Visible on SVG

If I understand correctly, you are referring to inline elements in HTML. In that case, this limitation is only applicable to the implementation. IE9+ permits the use of overflow:visible on elements, whereas other browsers, to the best of my knowledge, do not.

A potential solution, which should ideally be implemented initially in my opinion, involves defining a coordinate system ( viewBox ) within the svg. Subsequently, the elements can be drawn within this coordinate system. In case any elements are clipped or located outside the designated area ( viewBox ), the width and/or height ( viewBox ) can be increased accordingly.

For determining a suitable default for your specific viewBox , you can test [0 0 width height] (where width and height represent the dimensions of your current svg). If needed, simply adjust the height until the entire bottom tick becomes visible.

In the 2014 update, there is still some inconsistency across browsers, but progress is being made. Firefox and IE now support overflow:visible on inline svg elements, and Blink (Opera 23/Chrome 36) has also added support for it. More details can be found in the bug report.

overflow: visible box-shadow : 0px -0px 10000px transparent /*trick for chrome*/ 

To resolve this issue in Chrome, I observed that either applying a large box-shadow to the SVG or placing the SVG within a DIV with a large shadow will prevent the overflow from being clipped to the limit of the box-shadow.

SVG Drop Shadows, Example 1. The element is used to create drop shadow effects. The idea is to take an SVG graphic (image or element) and move it a little bit in the xy plane. The first example offsets a rectangle (with ), then blend the original on top of the offset image (with ): Here is the SVG code:

Источник

Белая граница у тени в svg

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

Появляется проблема с случаем, когда border-radius: 0 . Также проблема с тем, что фон у svg должен быть прозрачным. А в этом случае он закрашивается. Как можно решить данную проблему?

3 ответа 3

Одна из проблем в том, что в svg линия утолщается и внутрь и наружу, при этом радиус скругления считается по середине этой линии. В % он вычисляется по другому,- от наружного размера.
При накладывании тени радиус скругления считается по наружной границе линии и размеры, так же по наружной.
То есть 7% радиус в вашем SVG означает 0.07*(115.2+12.8)=8.96 и это будет соответствовать наружному радиусу - 8.96+(12.8/2)=15.36px , а в процентах для тени это будет - 15.36/128=0,12 . То есть 12% .
Если не рассчитать радиусы то будут явные несоответствия в скруглении углов.

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

Вот пример. Радиус скругления рассчитывается функцией calc . Думаю если доработать код, то параметры 7% , 128px и тп. можно задать переменными и менять только их.

.container, .svg < width: 128px; height: 128px; >.container < position:relative; >.shadow < position: absolute; left:1px; top:1px; width:calc(128px - 2px); height:calc(128px - 2px); border:none; box-shadow: rgb(0, 0, 0) 0px 0px 8px 13px; border-radius: calc((0.07*(115.2 + 12.8) + 12.8/2)*1px); >

Источник

How to add shadow to SVG ?

I would like to create a simple shadow effect for some paths in SVG generated from a library. I have effectively used to add a shadow to other SVG elements like , but applying the same to a either seems to make it disappear or has no effect. For reference, here is the simple filter I am using:

I then select the relevent SVG element and append this to its style attribute: filter: url(#filter-id) . As mentioned previously, this works fine when applied to a , but not to a . Also just for reference, what I am trying to achieve is to make a specific part of the SVG graphic "glow" to signify it being selected. I'l also mention that my target browser is google chrome, since browsers seem to vary quite a bit in their implementation of the SVG spec. If someone can help me figure out how to achieve the desired effect for I would greatly appreciate it! Edit: I realize it would probably help if I included the SVG in question, since the most useful answer I've gotten doesn't seem to work for it. I wish I could provide a more minimal example, but this is about the most minimal I can manage. To provide context for it,all of the SVG is generated in the page dynamically using the mermaid-js library, except the two filters I append to the inner HTML, which should be used to "highlight" relevant parts of the svg as events are triggered on the web page. I apply these filters to the relevant elements by appending filter: url(#filter-id) to its style attribute. This does work for when I apply it to a that contains a , but doesn't when I apply it to a that contains a or if I apply it directly to the in question. In the snippet, one of the nodes in the graph is highlighted successfully, represented by the with id "flowchart-a-14". The filter is also applied to the arrow going between the alpha and bravo node, which is represented by the with id "L-a-b", which instead of being highlighted, disappears. Note 1: the behavior is using google chrome, which is the target browser. note 2: can't seem to include a runnable snippet. The button for bringing up the snippet editor doesn't appear for me.

Источник