扇形计算坐标

by Mike Lin

HTML

<figure class="wp-caption alignleft" style="width:300px"><svg width="369px" height="412px" viewBox="271 -34 369 412" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="The Mathematics Of A Circle Sector">
<title>The Mathematics Of A Circle Sector</title>
<desc>A circle sector with an additional triangle drawn inside</desc>
<defs>
<rect x="74" 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>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(271.000000, -34.000000)">
<path d="M74,34 L74,379 C74,379 74,379.000009 317,135 C244.449219,-35.6249987 74,34 74,34 Z" stroke="#979797"></path>
<polygon stroke="#63B3D7" stroke-width="2" points="74 35 313 134 74 135"></polygon>
<text font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16" font-weight="normal" letter-spacing="0.666666508" fill="#555555">
<tspan x="206.335344" y="274.338455">115</tspan>
</text>
<text font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16" font-weight="normal" letter-spacing="0.666666508">
<tspan x="80.5556499" y="343" fill="#555555">45</tspan>
<tspan x="97.7929829" y="343" font-family="Helvetica" font-size="18" fill="#4D4D4D">°</tspan>
</text>
<text font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16" font-weight="normal" letter-spacing="0.666666508" fill="#555555">
<tspan x="29.9968885" y="197.848549">115</tspan>
</text>
<text font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16" font-weight="normal" letter-spacing="0.666666508" fill="#63B3D7">
<tspan x="178.90726" y="128">x</tspan>
</text>
<text font-family="SourceSansPro-Regular, Source Sans Pro" font-size="16" font-weight="normal" letter-spacing="0.666666508" fill="#63B3D7">
<tspan x="186.07526" y="69">z</tspan>
</text>
<text...

CSS

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