扇形计算坐标2

by Mike Lin

HTML

<figure class="wp-caption alignnone" style="width:620px"><svg viewBox="287 -34 789 865" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>The Sector Types</title>
<desc>Four circle sectors with different angles</desc>
<defs>
<rect x="45" y="123" width="12" height="12"></rect>
<mask maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<rect x="283" y="115" width="12" height="12"></rect>
<mask maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<rect x="250" y="312" width="12" height="12"></rect>
<mask maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<rect x="47" y="319" width="12" height="12"></rect>
<mask maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white">
<use xlink:href="#path-7"></use>
</mask>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(293.000000, -34.000000)">
<g transform="translate(7.000000, 0.000000)">
<path d="M45,34 L45,379 C45,379 45,379.000009 288,135 C215.449219,-35.6249987 45,34 45,34 Z" stroke="#979797" fill="#F1F1F1"></path>
<path d="M45,323.035049 L45,34 C45,34 215.449219,-35.6249987 288,135 C176.498734,246.960123 116.160153,307.547012 83.5081069,340.333427 C73.7392059,330.102236 60.133333,323.566268 45.0000121,323.035049 Z" stroke="#979797" fill="#F1F1F1"></path>
<polygon stroke="#63B3D7" stroke-width="2" points="45 35 284 134 45 135"></polygon>
<text font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16" font-weight="normal" letter-spacing="0.666666508" fill="#555555">
<tspan x="177.335344" y="274.338455">115</tspan>
</text>
<text font-family="SourceSansPro-Regular,...

CSS

.demo{
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  position: relative;
  transform-origin: 0 0;
  transform: skew(45deg)
}