Question

我正在尝试使用Zurb webicons制作自制的社交按钮。但是，我没有包装上的所有按钮，所以我使用AI创建了一个按钮。问题是我的zurbs按钮在所有浏览器中表现相同，而我的AI SVG则没有。在Firefox上，一切都很好，但在Safari上大小几乎是双倍。

我对SVG知之甚少，但我尝试了很多东西（特别是这篇文章的提示：How does Safari calculate size of svg objects?）并且没有任何效果。不过，我可以确定问题来自“rect”的高度/宽度。如果我删除它，图像会消失。如果我使用％，那么尺寸很好，但不再有圆角了。

如果有人可以看看，这是我从zurb获取的facebook按钮的代码：

<!-- Code SVG Facebook -->

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-14 -14 48 48" enable-background="new -14 -14 48 48" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="90.0527" y1="-99.7603" x2="90.0527" y2="-106.3809" gradientTransform="matrix(7.2338 0 0 -7.2338 -641.4998 -735.5619)">
<stop  offset="0" style="stop-color:#4B71B8"/>
<stop  offset="1" style="stop-color:#293F7E"/>
</linearGradient>
<path fill="#334E8F" fill="url(#SVGID_1_)" d="M33.931,27.993c0,3.304-2.689,5.983-6.002,5.983H-8.082c-3.315,0-6.001-2.683-6.001-5.983V-7.928
c0-3.308,2.687-5.988,6.001-5.988h36.011c3.312,0,6.002,2.681,6.002,5.988V27.993z"/>
<path fill="#FFFFFF" d="M25.613-4.557c0,0-3.707,0-6.166,0c-3.662,0-7.732,1.535-7.732,6.835c0.019,1.845,0,3.613,0,5.603H7.481
v6.728h4.366v19.37h8.021V14.48h5.295l0.479-6.618h-5.913c0,0,0.016-2.946,0-3.8c0-2.093,2.184-1.974,2.312-1.974
c1.042,0,3.059,0.003,3.578,0v-6.646H25.613z"/>
</svg>

<!-- ********************************* -->

<foreignObject width="0" height="0" overflow="hidden">
    {% image output='images/webicon-facebook.png' '@MyBundle/Resources/public/images/webicon-facebook.png' %}
<img width="46em" height="46em" src="{{ asset_url }}" alt="Logo Facebook" />
    {% endimage %}
</foreignObject>

这是我使用AI完成的代码：

<!-- Code SVG Facebook Like -->

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<rect x="6.167" y="6" fill="#334E8F" stroke="#334E8F" stroke-width=11 stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit=10 width="36" height="36"/>
<g>
    <path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit=10 d="M40.863,25.109c1.829-1.835,1.264-5.548-1.903-5.548
            l-8.332,0.006c0.315-1.78,0.773-4.728,0.755-5.007c-0.174-2.637-1.844-5.846-1.914-5.978c-0.303-0.57-1.839-1.345-3.385-1.012
            C24.085,8,23.881,9.284,23.889,9.638c0,0,0.088,3.515,0.096,4.451c-0.954,2.115-4.248,7.673-5.248,8.101
            c-0.237-0.145-0.51-0.224-0.791-0.224H7.418c-0.891,0-1.613,0.728-1.613,1.626l0.001,14.668c0.062,0.791,0.728,1.411,1.516,1.411
            h9.452c0.838,0,1.52-0.687,1.52-1.532v-0.487c0,0,0.352-0.024,0.51,0.077c0.608,0.389,1.36,0.879,2.34,0.879h14.112
            c5.273,0,4.707-4.72,4.226-5.365c0.891-0.979,1.442-2.703,0.69-4.067C40.755,28.56,41.773,26.864,40.863,25.109z M16.797,38.139
            H7.323V23.5h9.474V38.139z M38.403,24.984l-0.086,0.362c2.431,0.696,1.137,3.52-0.605,3.705l-0.086,0.363
            c2.33,0.597,1.22,3.507-0.605,3.704l-0.085,0.362c1.903,0.315,1.444,3.59-1.44,3.59l-14.352,0.006
            c-1.014,0-1.933-1.165-2.681-1.165l-0.65-0.001V24.644c0.811-0.509,1.807-1.164,2.362-1.641c1.047-0.899,5.331-7.88,5.331-8.753
            c0-0.873-0.097-4.652-0.097-4.652s0.843-1.091,2.718-0.296c0,0,1.578,2.984,1.738,5.362c0,0-0.708,4.898-1.093,6.435h9.949
            C41.158,21.1,40.692,24.62,38.403,24.984z"/>
    <path fill="#334E8F" d="M38.721,21.099h-9.949c0.384-1.537,1.093-6.435,1.093-6.435c-0.161-2.378-1.738-5.362-1.738-5.362
            c-1.875-0.796-2.718,0.296-2.718,0.296s0.097,3.779,0.097,4.652c0,0.873-4.284,7.854-5.331,8.753
            c-0.555,0.477-1.551,1.132-2.362,1.641v11.267l0.65,0.001c0.748,0,1.667,1.165,2.681,1.165l14.352-0.006
            c2.884,0,3.344-3.276,1.44-3.59l0.085-0.362c1.825-0.198,2.935-3.108,0.605-3.704l0.086-0.363c1.742-0.185,3.036-3.009,0.605-3.705
            l0.086-0.362C40.692,24.62,41.158,21.1,38.721,21.099z"/>
</g>
</svg>

<!-- ********************************* -->

<foreignObject width="0" height="0" overflow="hidden">
    {% image output='images/webicon-facebook.png' '@MyBundle/Resources/public/images/webicon-facebook.png' %}
<img width="3em" height="3em" src="{{ asset_url }}" alt="Logo Facebook" />
    {% endimage %}
</foreignObject>

谢谢！

Answer 1

IOS6确实有一些关于如何在视网膜显示器上计算SVG尺寸的错误。我不知道这是否已经解决，但这个问题还有更多信息：

SVG as border-image on retina screens

为什么即使在所有更改建议后，SVG也无法在Safari中运行？

1 个答案: