CSS SVG text-shadow находится поверх текста

Я просто пытаюсь поместить тень за какой-то текст, но вместо этого вместо нее отображается тень поверх текста. Я использую Google Chrome. Это изображение:CSS SVG text-shadow находится поверх текста

Здесь УС:

#title { 
    fill:white; 
    color: white; 
    display: block; 
    margin: auto; 
    text-shadow: 10px 10px 3px black; 
    font-size: 400%; 
    text-align: center; 
    font-family: consolas; 
    font-weight: bold; 

    stroke: #F08000; 
    stroke-width: 1px; 
}

Это HTML:

<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;"> 
    <text id="title" text-anchor="middle" x="50%" y="20vh">Software</text> 
</svg>

источник

2016-07-14 Daniel Williams

Это выглядит очень уникальный ошибка. Лучше всего использовать фильтр SVG, чтобы сделать тень. –

Нужно ли использовать тег SVG? – GoMega54

Мне нужен тэг svg, чтобы создать хороший контур для текста, который работает в наиболее распространенных браузерах. Кажется, это проблема, но мне она нужна больше, чем тень. –

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

text-shadow: 6px 6px 10px black;

Вот рабочий образец: Check Me!

Надеюсь, это то, что вы ищете.

источник

2016-07-14 00:48:50

Это не правда, это просто делает его менее заметным. Если бы я сделал тень темнее, это не сработало бы. Хотя, возможно, это то, что я использую в конце. –

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

HTML:

<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;"> 
    <text id="titleshadow" text-anchor="middle" x="50%" y="20vh">Software</text> 
    <text id="titletop" text-anchor="middle" x="50%" y="20vh">Software</text> 
</svg>

CSS:

text { 
    display: block; 
    margin: auto; 
    font-size: 400%; 
    text-align: center; 
    font-family: consolas; 
    font-weight: bold; 
} 
#titleshadow { 
    text-shadow: 10px 10px 3px black; 
} 
#titletop { 
    stroke: #F08000; 
    stroke-width: 1px; 
    fill: #fff; 
}

Fiddle: https://jsfiddle.net/wquzq9z4/

источник

2016-07-14 04:39:14

Свойства CSS, такие как 'margin' и' text-align', недействительны для элементов SVG. Здесь также отображается «display: block». –

Я в основном просто копировал то, что было в OP, но спасибо за информацию. –

CSS SVG text-shadow находится поверх текста

ответ

Смежные вопросы