铬

Question

我有一个Div，它有一个SVG作为背景图像，我正在尝试设置一个投影滤镜。它适用于Chrome和Safari，但由于某些原因，在Safari中它非常小。我尝试改变一切但没有结果。可能是因为SVG。或者可能是Mac的视网膜屏幕？但是我在同一个屏幕上查看两个浏览器。截至目前，我认为这只是Safari的一个问题。

铬

enter image description here

的Safari

enter image description here

这是一个jsFiddle：http://jsfiddle.net/cTm52/3/

HTML

<div class="avatar-holder" style="height: 74px; width: 74px;" id="DIV_1">
<div class="shadow-holder" style="height: 74px; width: 74px;" id="DIV_2">
</div><div class="cut-gloss" style="height: 74px; width: 74px;" id="DIV_3">
<div class="add-gloss" style="height: 74px; width: 74px;" id="DIV_4"></div></div>
<img alt="" src="Image URL" class="image-preview image-preview avatar avatar-74 photo" height="74" width="74" originals="74" scale="4" id="IMG_5"></div>

CSS

#DIV_1 {
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
}/*#DIV_1*/

#DIV_2 {
    background: rgba(0, 0, 0, 0) url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg) no-repeat scroll 50% 50% / 98% 98% padding-box border-box;
    background-size: 98% 98%;
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    position: absolute;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-background-size: 98% 98%;
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-filter: drop-shadow(rgb(255, 0, 0) 0px 0px 6px);
    -webkit-locale: en-US;
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 0;
}/*#DIV_2*/

#DIV_3 {
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    position: absolute;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-mask-box-image: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg) 0 fill / auto / 0px stretch;
    -webkit-mask-box-image-source: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg);
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 1;
}/*#DIV_3*/

#DIV_4 {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgba(255, 255, 255, 0.298039) 55%, rgba(255, 255, 255, 0) 60%) repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    position: absolute;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 999;
}/*#DIV_4*/

#IMG_5 {
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    vertical-align: middle;
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-mask-box-image: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg) 0 fill / auto / 0px stretch;
    -webkit-mask-box-image-source: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg);
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 0;
}/*#IMG_5*/

Answer 1

谢谢迈克尔·穆拉尼的回答，因为他建议Safari以不同的方式衡量。我决定试着看看使用em进行测量是否比px更好用，效果很好。百分比不起作用。

不会像Safari上的Chrome一样呈现

-webkit-filter: drop-shadow(#00d33f 0px 0px 10px);

在Safari中的Chrome浏览器中呈现相同内容

-webkit-filter: drop-shadow(#00d33f 0px 0px .8em);

Answer 2

出于某种原因，Safari正在为底层过滤器计算选择错误的默认单位。您可以通过将投影更改为显式SVG过滤器来解决此问题。将以下代码添加到HTML中：

<svg x="0px" y="0px" width="0px" height="0px" width="0px" viewbox="0 0 200 200">
  <defs>
    <filter id="mydrop">
      <feComponentTransfer>
        <feFuncR type="linear" intercept="1"/>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="6"/>
    </filter>
  </defs>
</svg>

并将您的过滤器属性更改为：

-webkit-filter: url(#mydrop);

完全小提琴：http://jsfiddle.net/cTm52/5/

与Chrome相比，Safari的阴影非常小

铬

的Safari

2 个答案: