Last active
June 20, 2017 07:40
-
-
Save maxint137/0994d73cd04575f43a16664e60846663 to your computer and use it in GitHub Desktop.
learning SVG
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>SVG in HTML</title> | |
| <style> | |
| body { | |
| font-family: cursive; | |
| } | |
| circle { | |
| //fill: lavender; | |
| //stroke: navy; | |
| //stroke-width: 5; | |
| } | |
| .x-sign { | |
| stroke: black; | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| } | |
| .text { | |
| /*http://jisho.org/search/%E5%8B%95%20%23kanji*/ | |
| font-family: "HiraKakuPro-W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif; | |
| font-size: 22px; | |
| text-anchor: middle; | |
| font-weight:bold; | |
| } | |
| .word { | |
| font-size: 32px; | |
| font-weight:bold; | |
| text-anchor: middle; | |
| } | |
| .ruby { | |
| font-size: 10px; | |
| font-weight:normal; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="1250px" height="1250px" viewBox="0 0 1250 1250" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="120" cy="140" r="1" style="fill: green;" /> | |
| <text class="text" x="120" y="140" dy="8px" style="" | |
| >発音<tspan class="ruby" x="120" dy="-28px" textLength="64px" | |
| >はつおん</tspan><tspan class="ruby" x="120" dy="40px" textLength="64px" lengthAdjust="spacingAndGlyphs" | |
| >pronunciation</tspan></text> | |
| <defs> | |
| <filter id="drop-shadow"> | |
| <feGaussianBlur in="SourceAlpha" stdDeviation="12.2"/> | |
| </filter> | |
| <filter id="wcShadow" color-interpolation-filters="sRGB"> | |
| <feFlood flood-opacity=".5" flood-color="#000" result="flood" /> | |
| <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" /> | |
| <feGaussianBlur in="composite1" stdDeviation="3" result="blur" /> | |
| <!--<feOffset dx="1" dy="1" result="offset" />--> | |
| <feComposite in="SourceGraphic" in2="offset" result="composite2" /> | |
| </filter> | |
| <g class="wordCard" filter="url(#wcShadow)" id="g123" transform="translate(-35, -20)"> | |
| <g> | |
| <rect y="0" x="0" height="42" width="75" rx="5" ry="5"/> | |
| <circle cx="75" cy="0" r="8"/> | |
| </g> | |
| <g transform="rotate(45 75 0)"> | |
| <path class="x-sign" d="M 70,0 80,0"/> | |
| <path class="x-sign" d="M 75,-5 75,5"/> | |
| </g> | |
| </g> | |
| </defs> | |
| <g id="Word_楽しい" class="node" style="fill: black;" transform="translate(30,44)"> | |
| <g style="fill: #5cb85c" transform="translate(-10, -20)"> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g123"></use> | |
| </g> | |
| <text class="text" dx="0.0em" dy="0.0em">楽しい</text> | |
| <text dy="-1px">たのしい</text> | |
| <text dy="3.0em">enjoyable</text> | |
| <title>enjoyable</title> | |
| </g> | |
| <g id="Word_楽しい" class="node" style="fill: black;" transform="translate(130,44)"> | |
| <g style="fill: #5cb85c"> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g123"></use> | |
| </g> | |
| <text class="text" dy="8px" style="" | |
| >発音<tspan class="ruby" x="0" dy="-20px" -textLength="64px" | |
| >はつおん</tspan><tspan class="ruby" x="0" dy="30px" textLength="64px" lengthAdjust="spacingAndGlyphs" | |
| >pronunciation</tspan></text> | |
| <title>enjoyable</title> | |
| <circle cx="0" cy="0" r="1" style="fill: red;" /> | |
| </g> | |
| <use xlink:href="#flower" filter="url(#drop-shadow)" | |
| transform="translate(14, 14)"/> | |
| <use xlink:href="#flower"/> | |
| </svg> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment