2

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

铬合金

在此处输入图像描述

苹果浏览器

在此处输入图像描述

这是一个 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*/
4

2 回答 2

2

谢谢 Michael Mullany，因为他的回答很有效，并且他建议 Safari 以不同的方式衡量事物。我决定尝试看看使用 em 进行测量是否会比 px 更好，并且效果很好。百分比不起作用。

不像 Safari 上的 Chrome 那样呈现

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

在 Safari 中的两个 Chrome 中呈现相同

-webkit-filter: drop-shadow(#00d33f 0px 0px .8em);
于 2013-11-16T04:57:01.910 回答
1

出于某种原因，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/

于 2013-11-15T20:59:01.120 回答