国旗标准
（1949年9月28日中国人民政治协商会议第一届全体会议主席团公布）
国旗的形状、颜色两面相同，旗上五星两面相对。为便利计，本件仅以旗杆在左之一面为说明之标准。对于旗杆在右之一面，凡本件所称左均应改右，所称右均应改左。
（一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。
（二）五星之位置与画法如下：甲、为便于确定五星之位置，先将旗面对分为四个相等的长方形，将左上方之长方形上下划为十等分，左右划为十五等分。乙、大五角星的中心点，在该长方形上五下五、左五右十之处。其画法为：以此点为圆心，以三等分为半径作一圆。在此圆周上，定出五个等距离的点，其一点须位于圆之正上方。然后将此五点中各相隔的两点相联，使各成一直线。此五直线所构成之外轮廓线，即为所需之大五角星。五角星之一个角尖正向上方。丙、四颗小五角星的中心点，第一点在该长方形上二下八、左十右五之处，第二点在上四下六、左十二右三之处，第三点在上七下三、左十二右三之处，第四点在上九下一、左十右五之处。其画法为：以以上四点为圆心，各以一等分为半径，分别作四个圆。在每个圆上各定出五个等距离的点，其中均须各有一点位于大五角星中心点与以上四个圆心的各联结线上。然后用构成大五角星的同样方法，构成小五角星。此四颗小五角星均各有一个角尖正对大五角星的中心点。
（三）国旗之通用尺度定为如下五种，各界酌情选用：甲、长288公分，高192公分。乙、长240公分，高160公分。丙、长192公分，高128公分。丁、长144公分，高96公分。戊、长96公分，高64公分。
制作思路
根据国旗标准，五角星是通过去圆中五个等分点确定五个角的方位。因此单纯使用SVG难以完成，故使用采用html+SVG的方式获取所有五角星的位置，然后再使用坐标直接生成SVG。
制作步骤
1.创建一个900*600的矩形作为国旗底部，先将其分成四个相等的长方形，然后将左上角的长方形按宽度分成十五等分，高度分成十等分划出基础线。
2.然后按照标准中的位置和半径，划出五个五角星位置基准的圆形。
3.再按照标准中的规定用直线绘出小五角星到大五角星的朝向。
4.然后开始绘制大五角星，按照标准的要求，要求有个点位于基准圆的正上方。然后，确定出五等分点如下图所示。从x轴正方向顺时针旋转，依次为ABCDE点。图中也算出了各个角度的值。根据相关数学公式可知，圆上任一一点的坐标(x1,y1)可有如下公式算的：(x0,y0)为圆心坐标，r为半径，a为角度
x1 = x0 + r * cos(a * PI /180 )
y1 = y0 + r * sin(a * PI /180 ) 5.先在svg中新建一个polygon元素，然后使用如下js确定绘制路径。
<script type="text/javascript">
function getPointsOfStar(cx, cy, radius, firstDegree) {
var tmpCX1 = cx + radius * Math.cos((firstDegree + 72 * 0) * Math.PI / 180);
var tmpCY1 = cy + radius * Math.sin((firstDegree + 72 * 0) * Math.PI / 180);
var tmpCX2 = cx + radius * Math.cos((firstDegree + 72 * 1) * Math.PI / 180);
var tmpCY2 = cy + radius * Math.sin((firstDegree + 72 * 1) * Math.PI / 180);
var tmpCX3 = cx + radius * Math.cos((firstDegree + 72 * 2) * Math.PI / 180);
var tmpCY3 = cy + radius * Math.sin((firstDegree + 72 * 2) * Math.PI / 180);
var tmpCX4 = cx + radius * Math.cos((firstDegree + 72 * 3) * Math.PI / 180);
var tmpCY4 = cy + radius * Math.sin((firstDegree + 72 * 3) * Math.PI / 180);
var tmpCX5 = cx + radius * Math.cos((firstDegree + 72 * 4) * Math.PI / 180);
var tmpCY5 = cy + radius * Math.sin((firstDegree + 72 * 4) * Math.PI / 180);
return tmpCX1 + "," + tmpCY1 + " " + tmpCX3 + "," + tmpCY3 + " " + tmpCX5 + "," + tmpCY5
+ " " + tmpCX2 + "," + tmpCY2 + " " + tmpCX4 + "," + tmpCY4;
}
var bigStar = document.getElementById("bigStar");
var tmpPoints = getPointsOfStar(150, 150, 90, 54);
bigStar.setAttribute("points", tmpPoints);
</script>6.然后按照同样的方法，列出其他4个小五角星的位置。按照图中的小五角星方向基准线，调节小五角星的角度，使其与方向基准线对齐。
<script type="text/javascript">
function getPointsOfStar(cx, cy, radius, firstDegree) {
var tmpCX1 = cx + radius * Math.cos((firstDegree + 72 * 0) * Math.PI / 180);
var tmpCY1 = cy + radius * Math.sin((firstDegree + 72 * 0) * Math.PI / 180);
var tmpCX2 = cx + radius * Math.cos((firstDegree + 72 * 1) * Math.PI / 180);
var tmpCY2 = cy + radius * Math.sin((firstDegree + 72 * 1) * Math.PI / 180);
var tmpCX3 = cx + radius * Math.cos((firstDegree + 72 * 2) * Math.PI / 180);
var tmpCY3 = cy + radius * Math.sin((firstDegree + 72 * 2) * Math.PI / 180);
var tmpCX4 = cx + radius * Math.cos((firstDegree + 72 * 3) * Math.PI / 180);
var tmpCY4 = cy + radius * Math.sin((firstDegree + 72 * 3) * Math.PI / 180);
var tmpCX5 = cx + radius * Math.cos((firstDegree + 72 * 4) * Math.PI / 180);
var tmpCY5 = cy + radius * Math.sin((firstDegree + 72 * 4) * Math.PI / 180);
return tmpCX1 + "," + tmpCY1 + " " + tmpCX3 + "," + tmpCY3 + " " + tmpCX5 + "," + tmpCY5
+ " " + tmpCX2 + "," + tmpCY2 + " " + tmpCX4 + "," + tmpCY4;
}
var bigStar = document.getElementById("bigStar");
var tmpPoints = getPointsOfStar(150, 150, 90, 54);
bigStar.setAttribute("points", tmpPoints);
var littleStar1 = document.getElementById("littleStar1");
var littleStar2 = document.getElementById("littleStar2");
var littleStar3 = document.getElementById("littleStar3");
var littleStar4 = document.getElementById("littleStar4");
var tmpPoints1 = getPointsOfStar(300, 60, 30, 5);
littleStar1.setAttribute("points", tmpPoints1);
var tmpPoints2 = getPointsOfStar(360, 120, 30, 28);
littleStar2.setAttribute("points", tmpPoints2);
var tmpPoints3 = getPointsOfStar(360, 210, 30, 52);
littleStar3.setAttribute("points", tmpPoints3);
var tmpPoints4 = getPointsOfStar(300, 270, 30, 75);
littleStar4.setAttribute("points", tmpPoints4);
</script>7.根据js中输出的路径坐标，直接复制到svg中，可以删除掉js的辅助代码，直接生成五星红旗。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
<!-- Background -->
<rect width="900" height="600" fill="red" />
<polygon points="202.90067270632258,222.81152949374527 64.40491353343619,122.1884705062547 235.59508646656383,122.18847050625472 97.09932729367742,222.81152949374527 149.99999999999997,60" fill="yellow" fill-rule="nonzero" />
<polygon points="329.88584094275234,62.614672282429744 274.28498097893663,75.45114224730163 311.7219338546782,32.38485439642679 306.74853163031594,89.23110194355706 277.35871259331685,40.31822913028478" fill="yellow" fill-rule="nonzero" />
<polygon points="386.48842778576784,134.08414688357672 330.2919579377529,124.17519302880197 381.5801940101595,99.16024888623008 354.7905546699921,149.54423259036625 346.84886559632764,93.036178611025" fill="yellow" fill-rule="nonzero" />
<polygon points="378.46984425976973,233.64032260820167 331.16214912185046,201.73087932549004 388.1907786235773,199.73939570022995 343.2242128958776,234.87112717665124 358.95301509892494,180.01827518942713" fill="yellow" fill-rule="nonzero" />
<polygon points="307.7645713530756,298.97777478867204 276.6856211562909,251.12038826850488 329.95888604263723,271.57007868728834 274.8398829616373,286.33917105045083 310.751038486359,241.99258720508394" fill="yellow" fill-rule="nonzero" />
</svg>8.附带js的整体代码
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
<!-- Background -->
<rect width="900" height="600" fill="#F40002" />
<!-- Base Horizontal Line -->
<path d="M0 30 L450 30" stroke="black" />
<path d="M0 60 L450 60" stroke="black" />
<path d="M0 90 L450 90" stroke="black" />
<path d="M0 120 L450 120" stroke="black" />
<path d="M0 150 L450 150" stroke="black" />
<path d="M0 180 L450 180" stroke="black" />
<path d="M0 210 L450 210" stroke="black" />
<path d="M0 240 L450 240" stroke="black" />
<path d="M0 270 L450 270" stroke="black" />
<path d="M0 300 L450 300" stroke="black" />
<!-- Base Vertical Line -->
<path d="M30 0 L30 300" stroke="black" />
<path d="M60 0 L60 300" stroke="black" />
<path d="M90 0 L90 300" stroke="black" />
<path d="M120 0 L120 300" stroke="black" />
<path d="M150 0 L150 300" stroke="black" />
<path d="M180 0 L180 300" stroke="black" />
<path d="M210 0 L210 300" stroke="black" />
<path d="M240 0 L240 300" stroke="black" />
<path d="M270 0 L270 300" stroke="black" />
<path d="M300 0 L300 300" stroke="black" />
<path d="M330 0 L330 300" stroke="black" />
<path d="M360 0 L360 300" stroke="black" />
<path d="M390 0 L390 300" stroke="black" />
<path d="M420 0 L420 300" stroke="black" />
<path d="M450 0 L450 300" stroke="black" />
<!-- Base Circle for Big Star -->
<circle r="1" cx="150" cy="150" fill="white" />
<circle r="90" stroke="white" cx="150" cy="150" fill="none"/>
<!-- Base Circle for first Little Star -->
<circle r="1" cx="300" cy="60" fill="white" />
<circle r="30" stroke="white" cx="300" cy="60" fill="none"/>
<!-- Base Circle for second Little Star -->
<circle r="1" cx="360" cy="120" fill="white" />
<circle r="30" stroke="white" cx="360" cy="120" fill="none"/>
<!-- Base Circle for third Little Star -->
<circle r="1" cx="360" cy="210" fill="white" />
<circle r="30" stroke="white" cx="360" cy="210" fill="none"/>
<!-- Base Circle for fourth Little Star -->
<circle r="1" cx="300" cy="270" fill="white" />
<circle r="30" stroke="white" cx="300" cy="270" fill="none"/>
<!-- Baseline for Direction of first Little Star -->
<path d="M150 150 L300 60" stroke="white" />
<!-- Baseline for Direction of second Little Star -->
<path d="M150 150 L360 120" stroke="white" />
<!-- Baseline for Direction of third Little Line -->
<path d="M150 150 L360 210" stroke="white" />
<!-- Baseline for Direction of fourth Little Line -->
<path d="M150 150 L300 270" stroke="white" />
<polygon id="bigStar" fill="#FAF408" fill-rule="nonzero" />
<polygon id="littleStar1" fill="#FAF408" fill-rule="nonzero" />
<polygon id="littleStar2" fill="#FAF408" fill-rule="nonzero" />
<polygon id="littleStar3" fill="#FAF408" fill-rule="nonzero" />
<polygon id="littleStar4" fill="#FAF408" fill-rule="nonzero" />
</svg>
<script type="text/javascript">
function get_points_of_star(cx, cy, radius, firstDegree) {
var tmpCX1 = cx + radius * Math.cos((firstDegree+ 72 * 0) * Math.PI / 180);
var tmpCY1 = cy + radius * Math.sin((firstDegree+ 72 * 0) * Math.PI / 180);
var tmpCX2 = cx + radius * Math.cos((firstDegree+ 72 * 1) * Math.PI / 180);
var tmpCY2 = cy + radius * Math.sin((firstDegree+ 72 * 1) * Math.PI / 180);
var tmpCX3 = cx + radius * Math.cos((firstDegree+ 72 * 2) * Math.PI / 180);
var tmpCY3 = cy + radius * Math.sin((firstDegree+ 72 * 2) * Math.PI / 180);
var tmpCX4 = cx + radius * Math.cos((firstDegree+ 72 * 3) * Math.PI / 180);
var tmpCY4 = cy + radius * Math.sin((firstDegree+ 72 * 3) * Math.PI / 180);
var tmpCX5 = cx + radius * Math.cos((firstDegree+ 72 * 4) * Math.PI / 180);
var tmpCY5 = cy + radius * Math.sin((firstDegree+ 72 * 4) * Math.PI / 180);
return tmpCX1 + "," + tmpCY1 + " " + tmpCX3 + "," + tmpCY3 + " " + tmpCX5 + "," + tmpCY5
+ " " + tmpCX2 + "," + tmpCY2 + " " + tmpCX4 + "," + tmpCY4;
}
var bigStar = document.getElementById("bigStar");
var littleStar1 = document.getElementById("littleStar1");
var littleStar2 = document.getElementById("littleStar2");
var littleStar3 = document.getElementById("littleStar3");
var littleStar4 = document.getElementById("littleStar4");
var tmpSoints = get_points_of_star(150, 150, 90, 54);
bigStar.setAttribute("points", tmpSoints);
var tmpPoints1 = get_points_of_star(300, 60, 30, 5);
littleStar1.setAttribute("points", tmpPoints1);
var tmpPoints2 = get_points_of_star(360, 120, 30, 28);
littleStar2.setAttribute("points", tmpPoints2);
var tmpPoints3 = get_points_of_star(360, 210, 30, 52);
littleStar3.setAttribute("points", tmpPoints3);
var tmpPoints4 = get_points_of_star(300, 270, 30, 75);
littleStar4.setAttribute("points", tmpPoints4);
</script>
</body>
</html>