LOGO bar 是啥

Posted 2023-04-15

..我说的是服装规格表里面的，不是广告。应该是副标

应该是衣服的商标条吧，衣服不是大都会印自己品牌的小标志在胸口位置么？ 参考技术A 广告 条！

IE svg 缩放问题

【中文标题】IE svg 缩放问题

【英文标题】：IE svg scaling issue

【发布时间】：2014-08-03 15:39:49

【问题描述】：

在这个website 上，.logo-bar 容器中有四个 svg 徽标。 它们中的每一个都放在一个图像标签内，如下所示：

<div class="logo-bar">
    <p class="logo">
        <a href=""><img src="resources/img/miterassa_logo.svg" ></a>
    </p>

viewBox 设置在每个 svg 文件中：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px"   viewBox="0 0 339.827 84.337" enable-background="new 0 0 339.827 84.337" xml:space="preserve">

Windows 7 和 Windows 8.1 上的 IE11 似乎无法正确缩放 svg。

有时，在初始加载或刷新页面后，只有一些徽标的缩放不正确。

附：我试图在 jsfiddle 中重现该问题，但问题从未出现。

【问题讨论】：

您没有使用 SVG...您使用的是图像。如果您想使用 SVG 元素，请将 that 放入链接而不是图像。

在 中使用 svg 从 Web 标准的角度来看是非常好的，并且应该可以正常工作（如果没有，您应该提交 IE 错误报告）。您是否尝试过在 css 中设置 元素的大小并从 svg 根元素中删除 width 和 height 属性？

我们使用了很多 SVG，我已经禁止使用 width 和 height 因为这样的问题。坚持使用 SVG 中的 viewBox 并让包含的 DOM 元素决定大小。

所以你是说 svg 中的 width 和 height 是问题所在？

@ErikDahlström 如果您将您的评论写成答案，我会接受它，因为您的评论包含此问题的解决方案。

【参考方案1】：

从网络标准的角度来看，在 中使用 svg 非常好，并且应该可以正常工作（如果没有，您应该提交 IE 错误报告）。您是否尝试过在 css 中设置 元素的大小并从 svg 根元素中删除 width 和 height 属性？

应用于logo-class 及其子项的样式规则也可能会影响结果。

【参考方案2】：

您需要使用 CSS 设置 SVG 的高度和宽度。我建议使用以下方法将浏览器和版本添加到正文标签类：

// Loop through each of the available browsers
jQuery.each(jQuery.browser, function(i, val)   
if(val != true)
// Render the browser type
        $(document.body).addClass("v"+parseInt(val));
    
// Render the browser version
    else
        $(document.body).addClass(i);
       
);

然后添加这个CSS：

.msie.v9 svg, .msie.v10 svg 
  width: 100%; 
  height:600px; // Add your own height here