保留SVG文本的高宽比 [英] Preserve aspect ratio for SVG Text

问题描述

这是

Paulie_D - 评论我的旧问题：

至于长宽比，您应该移除宽度&身高100％
值。他们并不是真的需要。 SVG将根据div大小缩放到所需的
大小。 - jsfiddle.net/2qqrL7ng/1 -

这不是一种选择，因为SVG元素需要响应尺寸变化不保持宽高比。只是文本需要保持比例，其他所有内容都应该尽可能地做出反应。

编辑

切换perserveAspectRatio从none到xMidYMid的svg参数保持了SVG的纵横比，但是所需的效果是，SVG本身不保留纵横比，而是使用-tags。这意味着以下将 NOT 作为解决方案：

 < div class =function height3x svg -containerstyle =height：112px; width：200px;> 
< svg xmlns =http://www.w3.org/2000/svgversion =1.1id =mySVGwidth =100％height =100％viewBox =0 0 100 100preserveAspectRatio =xMidYMidstyle =background-color：whitesmoke> 
< g class =functionid =keyboard_btn_24> 
< polygon id =okpoints =25,25 75,25 75,75 25,75>< / polygon> 
< text id =ok_textx =39y =55>确定< / text> 
< / g> 
< g class =functionid =keyboard_btn_25preserveAspectRatio =xMidYMid> 
< polygon id =upstroke =blackstroke-width =0.1points =0,0 100,0 65,35 35,35>< / polygon> 
< text x =42y =20>< / text> 
< / g> 
< g class =functionid =keyboard_btn_26> 
< polygon id =rightstroke =blackstroke-width =0.1points =100,0 100,100 65,65 65,35>< / polygon> 
< text x =81y =53>< / text> 
< / g> 
< g class =functionid =keyboard_btn_27> 
< polygon id =downstroke =blackstroke-width =0.1points =0,100 35,65 65,65 100,100>< / polygon> 
< text x =42y =91>< / text> 
< / g> 
< g class =functionid =keyboard_btn_28> 
< polygon id =leftstroke =blackstroke-width =0.1points =0,0 35,35 35,65 0,100>< / polygon> 
< text x =5y =53>< / text> 
< / g> 
< / svg> 
< / div> 
  

/编辑

预先感谢。

解决方案

问题：如何让标签保持高宽比，同时改变宽高比的svg？

你不能。如果文本是SVG的一部分，它将与SVG一起缩放。有可能的解决方案：

（ 1）从SVG中删除文本并将其放置在顶部。例如，在你的HTML中使用定位的< div> 或其他东西。

SVG的宽高比，并对< text> 元素应用反比例变换。

This is an edited copy of https://stackoverflow.com/questions/29105120/preserve-aspect-ratio-for-svg-text-and-react-to-javascript-touch-events which I will remove, because it asked 2 related but technically different questions.

as I already explained in my last question, I'm trying to make a navigation-div with 4 buttons, one to go left, one to go right, another one to go down and yet another one to go up. Plus there needs to be an OK-button in the middle.

That worked really well with the explanation given here: Using CSS and HTML5 to create navigation buttons using trapezoids

I created the SVG like:

<div class="function height3x svg-container" style="height: 112px; width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySVG" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="background-color: whitesmoke">
    <g class="function" id="keyboard_btn_24">
        <polygon id="ok" points="25,25 75,25 75,75 25,75"></polygon>
        <text id="ok_text" x="39" y="55">OK</text>
    </g>
    <g class="function" id="keyboard_btn_25">
        <polygon id="up" stroke="black" stroke-width="0.1" points="0,0 100,0 65,35 35,35"></polygon>
        <text x="42" y="20"></text>
    </g>
    <g class="function" id="keyboard_btn_26">
        <polygon id="right" stroke="black" stroke-width="0.1" points="100,0 100,100 65,65 65,35"></polygon>
        <text x="81" y="53"></text>
    </g>
    <g class="function" id="keyboard_btn_27">
        <polygon id="down" stroke="black" stroke-width="0.1" points="0,100 35,65 65,65 100,100"></polygon>
        <text x="42" y="91"></text>
    </g>
    <g class="function" id="keyboard_btn_28">
        <polygon id="left" stroke="black" stroke-width="0.1" points="0,0 35,35 35,65 0,100"></polygon>
        <text x="5" y="53"></text>
    </g>
</svg>
</div>

But I have two problems that I seem not to be able to figure out.

First of all: While I want the SVG to be responsive, I don't want to scale the text without keeping the aspect-ratio given by the font.

I already tried (unsuccessfully) preserveAspectRatio, which does not seem to do much to the text.

Questions: How can you make the tag keep it's aspect ratio, while changing the aspect ratio of the svg?

You can view and edit the minimal example: jsFiddle

Paulie_D - Commented on my old question:

As for the Aspect Ratio, you should remove the width & height 100% values. They aren't really needed. The SVG will scale to the required size based on the div size. - jsfiddle.net/2qqrL7ng/1 –

This is not an option, because the SVG Element needs to respond to size changes that can not keep the aspect ratio. Just the text needs to keep the ratio, everything else should be as responsive as possible.

EDIT

Switching the svg argument of perserveAspectRatio from "none" to "xMidYMid" keeps the aspect ratio of the SVG, but the desired effect is, that the SVG itself does not keep it's aspect ratio, but the -tags do. Which means the following would NOT be a solution:

<div class="function height3x svg-container" style="height: 112px; width: 200px;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySVG" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background-color: whitesmoke">
        <g class="function" id="keyboard_btn_24">
            <polygon id="ok" points="25,25 75,25 75,75 25,75"></polygon>
            <text id="ok_text" x="39" y="55">OK</text>
        </g>
        <g class="function" id="keyboard_btn_25" preserveAspectRatio="xMidYMid">
            <polygon id="up" stroke="black" stroke-width="0.1" points="0,0 100,0 65,35 35,35"></polygon>
            <text x="42" y="20"></text>
        </g>
        <g class="function" id="keyboard_btn_26">
            <polygon id="right" stroke="black" stroke-width="0.1" points="100,0 100,100 65,65 65,35"></polygon>
            <text x="81" y="53"></text>
        </g>
        <g class="function" id="keyboard_btn_27">
            <polygon id="down" stroke="black" stroke-width="0.1" points="0,100 35,65 65,65 100,100"></polygon>
            <text x="42" y="91"></text>
        </g>
        <g class="function" id="keyboard_btn_28">
            <polygon id="left" stroke="black" stroke-width="0.1" points="0,0 35,35 35,65 0,100"></polygon>
            <text x="5" y="53"></text>
        </g>
    </svg>
</div>

/EDIT

Thanks in advance.

解决方案

Questions: How can you make the tag keep it's aspect ratio, while changing the aspect ratio of the svg?

You cannot. If the text is part of the SVG it gets scaled with the SVG. There is no way to make a part of the SVG exempt from the scaling.

Possible solutions:

(1) Remove the text from the SVG and position it on top. For example use a positioned <div> in your HTML or something.

(2) Use JS to calculate the aspect ratio of the SVG and apply an inverse scaling transform to the <text> element.

这篇关于保留SVG文本的高宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！