本來這個blog是記錄開發輸入法的點滴的,後來越來越雜,現在什麼都記錄了。

2012年3月29日 星期四

Hong Kong Emblem Simplest SVG (hollow) 香港旗 香港徽號 SVG (空心).

>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0" width="450" height="450" >

  <style type="text/css" >
    <![CDATA[
      text.emblemChars {
          fill:red; stroke:red; text-anchor:middle; font-size:35px; font-family: SimHei;
      }
    ]]>
  </style>

  <defs>
      <path id="petalOutline" d="M 0 0
               A 20 25 0 1 1 0 -135
               A 30 30 0 0 0 0 -90
               A 30 30 0 0 1 0 -45
               A 30 30 0 0 0 0 0 z"
               stroke="none" fill="#black" />

      <g id="petalDetails">
        <polygon fill="red" stroke="none"
                points="0,-12 3,-3.5 12,-3.5 5,2 7.5,10.5 0,5.5 -7.5,10.5 -5,2 -12,-3.5 -3,-3.5"
                transform="translate(-20,-75) rotate(30)" />
        <path d="M 0 0
                 A 60 60 0 0 1 -30 -60"
                 stroke="red" fill="none" stroke-width="1px" />
      </g>

  </defs>

  <g transform="translate(225, 225)">
    <defs>
      <mask id="myMask" maskUnits="userSpaceOnUse" x="-180" y="-180" width="360" height="360">
        <!-- by default the whole rectangle is a big hole -->
      
        <!-- add a white rectangle so that the whole area is not a hole -->
        <rect x="-180" y="-180" width="360" height="360" fill="#fff" />
      
        <!-- fill the parts you think should become hollow with white coor -->
        <use xlink:href="#petalOutline" transform="rotate(13.48)" />
        <use xlink:href="#petalOutline" transform="rotate(85.48)" />
        <use xlink:href="#petalOutline" transform="rotate(157.48)" />
        <use xlink:href="#petalOutline" transform="rotate(229.48)" />
        <use xlink:href="#petalOutline" transform="rotate(301.48)" />
      </mask>
    </defs>

    <circle fill="none" stroke="red" cx="0"  cy="0"  r="220"/>
    <g mask="url(#myMask)">
      <circle fill="red" stroke="none" cx="0"  cy="0"  r="180"/>
    </g>
    <use xlink:href="#petalDetails" transform="rotate(13.48)" />
    <use xlink:href="#petalDetails" transform="rotate(85.48)" />
    <use xlink:href="#petalDetails" transform="rotate(157.48)" />
    <use xlink:href="#petalDetails" transform="rotate(229.48)" />
    <use xlink:href="#petalDetails" transform="rotate(301.48)" />

    <text class="emblemChars" y="-186" transform="rotate(-110.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate( -93.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate( -76.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate( -59.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate( -42.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate( -25.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(  -8.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(   8.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(  25.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(  42.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(  59.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(  76.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate(  93.5)"></text>
    <text class="emblemChars" y="-186" transform="rotate( 110.5)"></text>

    <text class="emblemChars" y="-186" transform="rotate(-125.0)"></text>
    <text class="emblemChars" y="-186" transform="rotate( 125.0)"></text>

    <text class="emblemChars" y="+215" transform="rotate( 33.0)">H</text>
    <text class="emblemChars" y="+215" transform="rotate( 23.7)">O</text>
    <text class="emblemChars" y="+215" transform="rotate( 14.3)">N</text>
    <text class="emblemChars" y="+215" transform="rotate(  5.0)">G</text>
    <text class="emblemChars" y="+215" transform="rotate( -5.0)">K</text>
    <text class="emblemChars" y="+215" transform="rotate(-14.3)">O</text>
    <text class="emblemChars" y="+215" transform="rotate(-23.7)">N</text>
    <text class="emblemChars" y="+215" transform="rotate(-33.0)">G</text>
 </g>
</svg>