Question

我尝试创建多边形作为菜单（please see this attachment）的背景，这应该扩展（响应式设计）。

我是否需要监听大小更改并使用javascript更改main_menue_polygon多边形元素的点数？也许用css有更好，更干净的实现？

请注意，我将使用bootstrap。菜单应该从引导主容器的左边50px开始，然后结束50px。

<div style="width: 1138px; height: 555px">
    <img src="example-picture1.jpg"
</div>

<svg width="1300" height="200" id="main_menue_svg">
    <polygon id="main_menue_polygon" points="0,0 33,33 0,66 1244,66 1211,33 1244,0 0,0"
    style="fill:rgb(51, 76, 25);stroke:rgb(51, 76, 25);stroke-width:0;fill-rule:evenodd;" />
</svg>

Answer 1

您可以使用边界框设置svg的宽度/高度和viewBox。下面的示例使用您的多边形，并响应窗口大小并调整大小。

import java.util.Scanner;
class temp {
  public static String name;
  public static String gender;
  public static String type;

  public static void main (String args[]) {

  Scanner inp = new Scanner(System.in);

  //Get Input
  System.out.print("Are you male or female (M/F): ");
  gender = inp.next();
  System.out.println("");

  //Check if it is valid option
  if (gender == "M" || gender == "m") {
    gender = "Male";
  } else if (gender == "F" || gender == "f") {
    gender = "Female";
  } else {
    System.out.println("Incorrect keyword " + gender + " detected. Please try again");
    System.out.print("Are you male or female (M/F): ");
    gender = inp.next();
    System.out.println("");
  }

  //Print Output
  System.out.println(gender);
  }

}

动态的，带有依赖多边形 - 在html5中的svg

1 个答案: