SVG 文件在 Safari 和移动版 Safari 中模糊

问题描述 投票：0回答：2

我希望我的徽标采用 SVG 格式，这样我就不必担心分辨率及其模糊问题。

我只是将网站放到服务器上，在我的 iPhone 上打开它，这就是我看到的：https://i.stack.imgur.com/pAJST.jpg

用 CSS 做我能想到的一切（我是 Web 新手）。

发生什么事了？ 它在 Chrome 上看起来很棒，但我也刚刚检查了桌面版 Safari，它看起来也很模糊。

这是我的两个文件：

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="custom.css"/>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</head>
<body>

    <div class="ui borderless main menu fixed">
        <div class="ui text container" style="max-width: 100% !important">
            <div class="header item">
                <img id="headerLogo" class="logo" src="images/FullLogo_test.svg">
            </div>

            <a href="tel:555-555-5555" class="ui right floated item" tabindex="0">
                <button class="ui inverted black button">Call (555) 555-5555</button>
            </a>
        </div>
    </div>
</body>
</html>

自定义.css：

#headerLogo {
    width: 200px;
}

@media only screen
and (min-device-width : 380px)
and (max-device-width : 480px) {

    #headerLogo {
        width: 150px;
    }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 380px) {

    #headerLogo {
        width: 120px;
    }
}
css image svg safari blurry
2个回答
0
投票

无法重现此问题。但由于已经过去五年了，想必您所遇到的渲染错误现已得到修复。

.headerLogo {
    width: 200px;
}
<svg class="headerLogo" viewBox="0 0 503 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>FullLogo</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <filter x="-1.4%" y="-3.9%" width="102.8%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="FullLogo" filter="url(#filter-1)" transform="translate(2.000000, 2.000000)">
            <g id="Group">
                <text id="CONTRACTING" font-family="Avenir-Light, Avenir" font-size="55.987199" font-weight="300" letter-spacing="9.55000019" fill="#000000">
                    <tspan x="0" y="108.831806">CONTRACTIN</tspan>
                    <tspan x="458.521" y="108.831806">G</tspan>
                </text>
                <g id="V4" transform="translate(2.000000, 0.000000)">
                    <g id="T" transform="translate(441.552376, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="S" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="16" y="38">S</tspan>
                        </text>
                    </g>
                    <g id="E" transform="translate(379.219961, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="14.9299197" y="38.119744">E</tspan>
                        </text>
                    </g>
                    <g id="B" transform="translate(314.274810, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="N" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="11" y="38">N</tspan>
                        </text>
                    </g>
                    <g id="A" transform="translate(251.942395, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="O" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="11" y="38">O</tspan>
                        </text>
                    </g>
                    <g id="H" transform="translate(186.997245, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="B" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="15" y="38">B</tspan>
                        </text>
                    </g>
                    <g id="P" transform="translate(124.664830, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="G" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="12" y="38">G</tspan>
                        </text>
                    </g>
                    <g id="L" transform="translate(62.332415, 0.000000)">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="O" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="11" y="38">O</tspan>
                        </text>
                    </g>
                    <g id="A">
                        <rect id="Rectangle" stroke="#A50D1F" stroke-width="5.5987199" x="2.79935995" y="2.79935995" width="47.4024951" height="47.4024951"></rect>
                        <text id="D" font-family="Avenir-Black, Avenir" font-size="37.3247993" font-weight="700" letter-spacing="-0.146883539" fill="#000000">
                            <tspan x="12" y="38">D</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

0
投票

如果 SVG 中的任何元素具有投影效果，Safari 可能会使它们变得模糊。没有阴影的 SVG 应该看起来不错。为了确保最佳渲染，如果需要阴影，请考虑删除投影效果并创建具有模糊效果的单独图层。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.