当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Create an SVG with a 9 degrees slope

问题描述:

I've created a polygon/triangle using an SVG, however I'm not sure how to do the following:

1) Have a 9 degree angle/slant

2) Keep aspect ratio when the browser resizes. (width 100%)

Here's the SVG code:

<svg preserveAspectRatio="none" viewBox="0 0 25 10">

<polygon points="0,10 40,0 25, 10 0" />

</svg>

And here is the Codepen:

http://codepen.io/anon/pen/VeNyQN

Thanks!

网友答案:

Your question is not entirely clear, but I am guessing you just want to insert a triangle on your page that has a 9 degree slope of the top side? Then have it keep its 9 degree slope as the page width increases? Is that right?

If so, you don't want to be using preserveAspectRatio="none". That breaks the aspect ratio and causes the SVG to stretch.

First we need to work out what a 9deg slope corresponds to.

tan(9) = Opposite-side / Adjacent-side


              _____-----+
    _____-----          |  opposite
._9deg__________________|
         adjacent

tan(9) ~= 0.1584

So that means for a triangle 100 wide, the height of the opposite side is 15.84.

So our SVG will need to look like the following:

<svg width="100%" viewBox="0 0 100 15.84">
  <polygon points="0,15.84 100,15.84 100 0" />
</svg>
分享给朋友:
您可能感兴趣的文章:
随机阅读: