 | | >
| <?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> |
