QSS и SVG. Почему не отображаются тени?

312

26 декабря 2017, 14:59

Суть проблемы: Есть SVG-картинки с тенями, которые я навешиваю на виджеты посредством Style Sheets. При отрисовке у картинок почему-то не отображаются тени. Одна из картинок, для примера:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="406px" height="236px" viewBox="0 0 406 236" style="enable-background:new 0 0 406 236;" xml:space="preserve">
<defs>
    <filter id="dropshadow" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
        <feOffset dx="0" dy="1" result="offsetblur"/>
    </filter>
</defs>
<g>
    <path fill="#FA1414" fill-opacity="1" style="filter:url(#dropshadow)" d="M3,231.606V14.383c0-0.77,0.597-1.394,1.333-1.394h156.128c6.938,0,13.473-4.236,18.655-9.59
        C179.365,3.143,179.696,3,180.046,3h23.119h22.794c0.347,0,0.67,0.138,0.919,0.39c4.575,4.644,12.949,9.599,19.025,9.599h155.764
        c0.736,0,1.333,0.624,1.333,1.394v217.223c0,0.77-0.597,1.394-1.333,1.394H4.333C3.597,233,3,232.376,3,231.606z"/>
    <path fill="#EFEFEF" d="M3,231.606V14.383c0-0.77,0.597-1.394,1.333-1.394h156.128c6.938,0,13.473-4.236,18.655-9.59
        C179.365,3.143,179.696,3,180.046,3h23.119h22.794c0.347,0,0.67,0.138,0.919,0.39c4.575,4.644,12.949,9.599,19.025,9.599h155.764
        c0.736,0,1.333,0.624,1.333,1.394v217.223c0,0.77-0.597,1.394-1.333,1.394H4.333C3.597,233,3,232.376,3,231.606z"/>
</g>
</svg>

Qt вообще умеет в SVG без своих QtSvg-классов?

UPD: Картинка в браузере:

Та же картинка, открытая в qt-шном примере (SVG Viewer Example):

Если же натягивать файл так:

w->setStyleSheet("TWidgetSearchCategoriesView{ border-image: url(:/NewGraphics/catalog_bg.svg); }");

то тени нет вообще.

Разница большая. А хотелось бы, чтобы везде отображалось так, как в браузере.

Answer 1

Для того, чтобы фильтр работал, ему нужно правильно задать Filter effects region

по умолчанию: x="-10%" y="-10%" width="120%" height="120%" то есть, если ничего не прописывать, то будут эти значения. В большинстве случаев этого достаточно, чтобы фильтр работал. Если часть изображения не попадает в зону действия фильтра, то она обрезается. Поэтому поиграйтесь с этими параметрами.

Еще одна неточность у вас: когда явно указывается filterUnits="userSpaceOnUse", то значения x,y, width,height` нужно указывать в пикселях.

По умолчанию filterUnits="objectBoundingBox"

вот при этом значении нужно писать в процентах. width="100%"
То есть, в итоге можно не указывать эти все значения

 <filter id="dropshadow"  >
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
        <feOffset dx="0" dy="1" result="offsetblur"/>
    </filter>

пробовать так встроить в ваше приложение. Если не появится тень, то пробуйте увеличивать значения width, height в процентах при filterUnits="objectBoundingBox"

Либо в пикселях при filterUnits="userSpaceOnUse"

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="406px" height="236px" viewBox="0 0 406 236"  > 
<defs> 
    <filter id="dropshadow"  > 
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> 
        <feOffset dx="0" dy="1" result="offsetblur"/> 
    </filter> 
</defs> 
<g> 
    <path fill="#FA1414" fill-opacity="1" style="filter:url(#dropshadow)" d="M3,231.606V14.383c0-0.77,0.597-1.394,1.333-1.394h156.128c6.938,0,13.473-4.236,18.655-9.59 
        C179.365,3.143,179.696,3,180.046,3h23.119h22.794c0.347,0,0.67,0.138,0.919,0.39c4.575,4.644,12.949,9.599,19.025,9.599h155.764 
        c0.736,0,1.333,0.624,1.333,1.394v217.223c0,0.77-0.597,1.394-1.333,1.394H4.333C3.597,233,3,232.376,3,231.606z"/> 
    <path fill="#EFEFEF" d="M3,231.606V14.383c0-0.77,0.597-1.394,1.333-1.394h156.128c6.938,0,13.473-4.236,18.655-9.59 
        C179.365,3.143,179.696,3,180.046,3h23.119h22.794c0.347,0,0.67,0.138,0.919,0.39c4.575,4.644,12.949,9.599,19.025,9.599h155.764 
        c0.736,0,1.333,0.624,1.333,1.394v217.223c0,0.77-0.597,1.394-1.333,1.394H4.333C3.597,233,3,232.376,3,231.606z"/> 
</g> 
</svg>

Для наглядности добавил красную рамку - это область действия svg. Элемент svg немного уменьшил для расширения действия фильтра <g transform="scale(0.95)">

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="406px" height="236px" viewBox="0 0 406 236" style="border:1px solid red;" > 
<defs> 
    <filter id="dropshadow"  > 
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> 
        <feOffset dx="0" dy="1" result="offsetblur"/> 
    </filter> 
</defs> 
<g transform="scale(0.95)"> 
    <path fill="#FA1414" fill-opacity="1" style="filter:url(#dropshadow)" d="M3,231.606V14.383c0-0.77,0.597-1.394,1.333-1.394h156.128c6.938,0,13.473-4.236,18.655-9.59 
        C179.365,3.143,179.696,3,180.046,3h23.119h22.794c0.347,0,0.67,0.138,0.919,0.39c4.575,4.644,12.949,9.599,19.025,9.599h155.764 
        c0.736,0,1.333,0.624,1.333,1.394v217.223c0,0.77-0.597,1.394-1.333,1.394H4.333C3.597,233,3,232.376,3,231.606z"/> 
    <path fill="#EFEFEF" d="M3,231.606V14.383c0-0.77,0.597-1.394,1.333-1.394h156.128c6.938,0,13.473-4.236,18.655-9.59 
        C179.365,3.143,179.696,3,180.046,3h23.119h22.794c0.347,0,0.67,0.138,0.919,0.39c4.575,4.644,12.949,9.599,19.025,9.599h155.764 
        c0.736,0,1.333,0.624,1.333,1.394v217.223c0,0.77-0.597,1.394-1.333,1.394H4.333C3.597,233,3,232.376,3,231.606z"/> 
</g> 
</svg>