我有一个SVG图像，当它在HTML中内联时，它的缩放效果很好，但是如果我将同一个SVG移动到一个文件中，并尝试在HTML中标记该文件，它就不会缩放。
（我知道这里有类似的问题，但通常情况下是相反的。）
我读过this很棒的文章，还有其他的，我也读过StackOverflow，但仍然没有答案。
顺便说一句，我从Amazon复制了potofgold.svg，它表现得很完美，所以我猜它一定是我的特定SVG。
我注意到的唯一不同之处是我的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 250 182.6" style="enable-background:new 0 0 250 182.6;" xml:space="preserve">

字符串
而这一罐金子是：-

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 55" >

型
如果我试图从SVG标签中删除“冗余”和不推荐使用的选项，浏览器将拒绝显示图像。过时的SVG？
当图像来源于文件时，我可以做些什么来缩放图像？

编辑1：*

如果有帮助的话，是C here选项。西澳大利亚州盾形纹章。是因为它没有“defs”部分吗？
更多信息@帕特里克
我不得不取消对SVG的优化，这样我就可以向颜色和外部样式表添加变量，以便可以通过JavaScript修改（如果需要的话）：-

<style>
    <![CDATA[<!--<!--
        .st1{fill:var(--coa-bg-color);}
        .st2{fill:var(--coa-bg-color);fill-rule:evenodd;clip-rule:evenodd}
        .st3{fill:none;stroke:var(--coa-bg-color);stroke-width:1.78}
        .st5{fill:none;stroke:var(--coa-bg-color);stroke-width:.45}
        .st6{fill:none;stroke:var(--coa-bg-color);stroke-width:.67}
        .st7{fill:none;stroke:var(--coa-bg-color);stroke-width:.45;stroke-miterlimit:5}
        ]]>
    </style>

型
但关于身高，让我再次提请注意荒谬的重要性：-

min-height: 0;

型
在父Flex容器上！！！
无论如何，这里的功能演示我的工作：-

<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
    window.addEventListener("load", () =>
        {
            var imageDOM = document.getElementById("crest").contentDocument;
            var svgRoot = imageDOM.querySelector(':root');
            svgRoot.style.setProperty('--coa-bg-color', '#ffd700');
            
            var crest = imageDOM.getElementById("wa_state_crest");
        });
</script>
<style type="text/css">
:root {
  --main-bg-color: #002f5f;
}
    @-ms-viewport{
        width: device-width;
        height: auto;
    }   
    *, *:before, *:after{
        box-sizing: inherit;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -moz-user-select: none;
    }       
    ::-ms-clear{
        display: none;
    }       
    html, body{
        margin: 0px;
        box-sizing: border-box;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-overflow-style: none;
        -ms-content-zooming: none;
        touch-action: manipulation;
    }
    body {
        background-image: radial-gradient(#fff, #1ecbe1, #ADD8E6);
        overscroll-behavior: none;
        pointer-events: auto;
        display: flex;
        font-size: 14px;
        flex-direction: column;
        height: 100vh;
        padding: 1em;
    }   
    
    .wholeScreen{
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0px;
    }   

    div#headerDiv{
        display: flex;
        order: 1;
        width: 100%;
        padding: 0.5em;
        align-items: center;
        flex-grow: 10;
        flex-shrink: 10;
        flex-basis: 10%'
    }

.field__items {
        display: flex;
        order: 2;
        align-items: center;
        flex-grow: 90;
        flex-shrink: 90;
        flex-basis: 90%;
        min-height: 0;
}
.field__item {
    display: flex;
    order: 3;
    justify-content: center;
    align-content: center;
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    max-height: 100%;
    padding: 3em;
}

#crest {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: 3;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

</style>
</head>
<body>
<div class="wholeScreen">
   <div id="headerDiv">
     <h1>Coat of Arms</h1>
   </div>
   <div class="field__items">
        <div class="field__item">
          <object id="crest" title="Government of Western Australia" alt="Western Australian Coat of Arms" data="coa.svg" type="image/svg+xml"></object>
        </div>
    </div>
</div>
</body>
</html>

型
再次感谢你的帮助。

自从你编辑了相关页面的链接，我看了一下页面，我注意到表格有不同的列宽，导致SVG图像的渲染宽度不同。实际上，选项C看起来更窄，因此SVG图像缩放更小。
只要使用Chrome的检查器并添加这些CSS规则，您就会注意到不同的渲染：

/*
My idea was: (4 x 22%) + (3 x 4%) = 100%

But it's not correct due to padding and borders, so the browser
will try to correct. So, instead, I'll set the seperating empty
columns to a width of 0% as there's already some padding.

Use !important to override the inline style attributes.
*/

/* Columns containing text and images */
#summary-state-coat-of-arms table td:nth-child(2n+1) {
  width: 22% !important;
}

/* Spacing columns (empty) */
#summary-state-coat-of-arms table td:nth-child(2n) {
  width: 0% !important;
}

字符串
我没有尝试用外部图像替换内联的SVG图像。我只是注意到这个问题可能是由于表结构而不是SVG大小调整问题。
此外，我注意到您的“选项C”图像的黑色viewBox高度设置为240.85，而白色（黑色背景）的同一图像的viewBox高度为182.6，但两者具有相同的宽度。我建议你把黑色的那件降低一点。这可能是它不垂直居中的原因，即使您有preserveAspectRatio="xMidYMid meet"，这是默认行为。

编辑，评论后

只是一个问题HTTP头是否为<img>标记的 src 属性中设置的所有SVG图像发送正确的MIME类型？
这只是一个想法，但这可能会使一些浏览器有不必要的行为。
以现有的SVG图像为例，在SVG OMG中对其进行格式化/优化，然后将其设置为data:image/svg+xml;base64,....，这似乎与此Codepen proof of concept I made的预期一样。

css * 内联 * SVG图像缩放放置在 * 文件 * 它不

1条答案

编辑，评论后

相关问题

热门标签

最新问答