如何在 Web 应用程序中使用 SVG 徽标？

Question

我的 Web 应用程序仅需要支持现代浏览器（IE 从 10 开始）。但它必须完全响应，因此它在所有可能的显示尺寸和分辨率上都应该看起来不错。

左上角有标准徽标，链接到起始页。我想使用 SVG 徽标，它在任何分辨率下都应该看起来不错。起初，我将徽标放在普通的

<img>

标签中，并在 css 中指定高度和宽度。

<a href="@Url.Action("Index", "Home")" id="Home">
    <img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>

    #logo {
    height: 3em;
    width: 9em;
    margin: 0.3em 1.5em 0.3em 0.2em;
}

遗憾的是，IE 无法使用它，并且会剪切徽标而不是将其拉伸到给定的大小。所以我环顾四周，发现了这个建议，用于在页面中放置 SVG 图像。我现在拥有的是

<div id="logo">
    <a href="@Url.Action("Index", "Home")" id="Home">
        <object height="100%" width="100%"
                    data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
        </object>
    </a>
</div>

这可以在 IE 和 Firefox 中正确显示图像（尚未尝试其他浏览器），但该链接仅在 IE 中有效。在 IE 和 Firefox 中，光标都不会变为点击手形，并且带有 AdBlockPlus 的 FF 在悬停时显示“阻止”建议，可能是因为这是一个对象标记。

有没有一种方法可以在任何地方正确显示 SVG 图像，同时保留其链接功能？我不限于 CSS，但如果需要，可以对标记进行彻底的更改，而且我还可以更改 SVG 源。

Answer 1

我稍微玩了一下你的初始代码并让它工作......似乎你只需要将宽度设置为百分比，它就会适当地缩放高度。

#logo {
    width: 25%;
}

尝试在 JSFiddle 演示中更改百分比并调整结果窗口大小 我在 IE10（+ 模拟器中的 IE9）和 Chrome 中测试了它，它完全按照预期工作。

Answer 2

id：office_design_with_bed 名称： 带床的办公室设计 类型：svg 内容：|- 下一篇 斯里里尔 吉尼亚尼 娜娜吉埃