Question

我正要在SVG中垂直放置一个文本（标题），并且 IE也保留了特殊的宽度。但是在IE中，此标题变小了，而且有点滑稽。好吧，现在我读到了有关我现在使用的 paddin-bottom-hack 的信息。这是我的源代码：

h1 {
    display: flex;
    flex: 0 0 3em;
    min-height: 5em;        
    flex-direction: column;
    justify-content: center; 
    align-content:center;
    font-family: 'Variable-Bold';
    font-size: 1.6em; 
    line-height: 1; 
    letter-spacing:0;
    margin-right: 0.6em;
    max-width: 3.5em;
            border: 6px dotted yellow;
}
   .scaling-svg-container {
            position: relative; 

            width: 100%; 
            padding: 0;
            padding-bottom: 100%;
   }
h1 svg {
    display: inline-block;
    height: 100%; 
    max-height: 13em;
             position: absolute; 
             height: 100%; 
             width: 100%; 
            left: 0; 
            top: 0;
}

<h1 class="scaling-svg-container" 
                            style="padding-bottom: 24.0385%">
            <svg viewBox="0 0 50 208" preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg">
                <path id="verticalPath" fill="none" stroke="none" d="M37.05,208 V0"/>
                <rect x=4 y=4 width=42 height=200 stroke-width="3" stroke="#ff6e00" fill="none"/>
                <text x="104.3" text-anchor="middle" fill="#ff6e00">
                    <textpath href="#verticalPath">Meine Überschrift</textpath>
                </text>
            </svg>
</h1>

在IE中，当前看起来像这样： SCREEN IE

标题显示在从中间（此处用黄线表示）到顶部的（橙色）边框的区域内！为什么下面呢？为什么标题没有从下到上显示？源代码在这里有什么问题？那只是在IE中！

第二个PROB）在所有其他浏览器中，橙色边框的标题现在不再显示（垂直）居中（在前面的黄色虚线区域中），即显示弹性；和flex-direction：列；证明内容：中心； align-content：居中；，现在所有不起作用的东西，都假设具有以下位置：相对； /位置：绝对；去做。现在，我可以使用哪个选项在两个方向上（仅获取content-content：居中； align-content：center；获取）该标题（居中）位置？你怎么做到的？

哦，是的：可以在此处查看示例Visual link website

你能帮我吗？

不幸的人

SVG中文本定位的异常行为/问题// IE问题

0 个答案: