geometry.svg - mozsearch

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg width="640" height="400"

 viewBox="0 0 640 400"

 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny">

<style>

  svg .line-style { stroke: black; fill: none; stroke-width: 2 }

  svg .shape-style { stroke: none; fill: black }

  svg .mono-text-style { font: 14px monospace; fill: black }

  svg .frame-style { stroke: black; fill: #808080 }

  svg .title-style { stroke: black; fill: #204080 }

  svg .title-text-style { font: 14px arial; fill: white }

  svg .window-style { stroke: black; fill: #c0c0c0 }

  svg .window-text-style { font: 24px arial; fill: #404040 }

  svg.dark .line-style { stroke: #f2f2f2; fill: none; stroke-width: 2 }

  svg.dark .shape-style { stroke: none; fill: #f2f2f2 }

  svg.dark .mono-text-style { font: 14px monospace; fill: #f2f2f2 }

  svg.dark .frame-style { stroke: #f2f2f2; fill: #808080 }

  svg.dark .title-style { stroke: #f2f2f2; fill: #204080 }

  svg.dark .title-text-style { font: 14px arial; fill: white }

  svg.dark .window-style { stroke: #f2f2f2; fill: #404040 }

  svg.dark .window-text-style { font: 24px arial; fill: #f0f0f0 }

  [data-theme="dark"] svg .line-style { stroke: #f2f2f2; fill: none; stroke-width: 2 }

  [data-theme="dark"] svg .shape-style { stroke: none; fill: #f2f2f2 }

  [data-theme="dark"] svg .mono-text-style { font: 14px monospace; fill: #f2f2f2 }

  [data-theme="dark"] svg .frame-style { stroke: #f2f2f2; fill: #808080 }

  [data-theme="dark"] svg .title-style { stroke: #f2f2f2; fill: #204080 }

  [data-theme="dark"] svg .title-text-style { font: 14px arial; fill: white }

  [data-theme="dark"] svg .window-style { stroke: #f2f2f2; fill: #404040 }

  [data-theme="dark"] svg .window-text-style { font: 24px arial; fill: #f0f0f0 }

  [data-theme="light"] svg .line-style { stroke: black; fill: none; stroke-width: 2 }

  [data-theme="light"] svg .shape-style { stroke: none; fill: black }

  [data-theme="light"] svg .mono-text-style { font: 14px monospace; fill: black }

  [data-theme="light"] svg .frame-style { stroke: black; fill: #808080 }

  [data-theme="light"] svg .title-style { stroke: black; fill: #204080 }

  [data-theme="light"] svg .title-text-style { font: 14px arial; fill: white }

  [data-theme="light"] svg .window-style { stroke: black; fill: #c0c0c0 }

  [data-theme="light"] svg .window-text-style { font: 24px arial; fill: #404040 }

</style>

<rect x="100" y="70" width="420" height="300" fill="#808080" stroke="black"

      class="frame-style" />

<g transform="translate(40,45)">

<text x="0" y="-20" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">frameGeometry().pos()</text>

<text x="0" y="0" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">pos()</text>

<path d="m 57,22 l -11,-5 l 6,-6 z" class="shape-style" />

<polyline points="40,5 55,20" class="line-style" />

</g>

<g transform="translate(100,385)">

<text x="112" y="5" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">frameGeometry().width()</text>

<path d="m 0,0 l 10,-5 l 0,10 z" class="shape-style" />

<polyline points="0,0 90,0" class="line-style" />

<path d="m 420,0 l -10,-5 l 0,10 z" class="shape-style" />

<polyline points="420,0 330,0" class="line-style" />

</g>

<g transform="translate(85,370) rotate(-90)">

<text x="50" y="2" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">frameGeometry().height()</text>

<path d="m 0,0 l 10,-5 l 0,10 z" class="shape-style" />

<polyline points="0,0 40,0" class="line-style" />

<path d="m 300,0 l -10,-5 l 0,10 z" class="shape-style" />

<polyline points="300,0 260,0" class="line-style" />

</g>

<g transform="translate(110,80)">

<rect x="0" y="0" width="400" height="30" fill="#204080" stroke="black"

      class="title-style" />

<text x="160" y="20" fill="white" font-size="14px" font-family="arial"

        class="title-text-style">Window Title</text>

<rect x="0" y="30" width="400" height="250" fill="#c0c0c0" stroke="none"

      class="window-style" />

<text x="140" y="150" fill="#404040" font-size="24px" font-family="arial"

        class="window-text-style">Client Area</text>

</g>

<g transform="translate(115,115)">

<text x="20" y="25" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">geometry().pos()</text>

<path d="m 0,0 l 11,5 l -6,6 z" class="shape-style" />

<polyline points="0,0 15,15" class="line-style" />

</g>

<g transform="translate(110,345)">

<text x="124" y="3" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">geometry().width()</text>

<text x="124" y="-17" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">width()</text>

<path d="m 4,0 l 10,-5 l 0,10 z" class="shape-style" />

<polyline points="4,0 90,0" class="line-style" />

<path d="m 396,0 l -10,-5 l 0,10 z" class="shape-style" />

<polyline points="396,0 306,0" class="line-style" />

</g>

<g transform="translate(535,110) rotate(90)">

<text x="50" y="2" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">geometry().height()</text>

<text x="50" y="-18" fill="black" font-size="14px" font-family="monospace"

      class="mono-text-style">height()</text>

<path d="m 0,0 l 10,-5 l 0,10 z" class="shape-style" />

<polyline points="0,0 30,0" class="line-style" />

<path d="m 250,0 l -10,-5 l 0,10 z" class="shape-style" />

<polyline points="250,0 220,0" class="line-style" />

</g>

</svg>