<template>
  <div>
    <svg
      :width="props.dotSize"
      :height="props.dotSize"
      :viewBox="`0 0 ${props.dotSize} ${props.dotSize}`"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <ellipse
          id="path-ModalInfo-1"
          cx="1.4433567"
          cy="10.4439893"
          rx="1.4433567"
          ry="1.44398933"
        ></ellipse>
        <filter
          x="-311.8%"
          y="-311.6%"
          width="723.5%"
          height="723.3%"
          filterUnits="objectBoundingBox"
          id="filter-ModalInfo-2"
        >
          <feMorphology
            radius="0.5"
            operator="dilate"
            in="SourceAlpha"
            result="shadowSpreadOuter1"
          ></feMorphology>
          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur
            stdDeviation="2.5"
            in="shadowOffsetOuter1"
            result="shadowBlurOuter1"
          ></feGaussianBlur>
          <feComposite
            in="shadowBlurOuter1"
            in2="SourceAlpha"
            operator="out"
            result="shadowBlurOuter1"
          ></feComposite>
          <feColorMatrix
            values="0 0 0 0 0   0 0 0 0 1   0 0 0 0 0.314202964  0 0 0 0.6 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g
          id="林业防火-智感-重复报警弹窗-切图版"
          transform="translate(-240, -490)"
          fill-rule="nonzero"
        >
          <g id="弹窗----" transform="translate(175.2674, 165.0542)">
            <g id="文字" transform="translate(64.7326, 10.2458)">
              <g id="预警信息-" transform="translate(0, 36.7)">
                <g id="编组-47" transform="translate(0.5, 44)">
                  <g id="椭圆形" transform="translate(6.4709, 231.1981)">
                    <use
                      fill="black"
                      fill-opacity="1"
                      filter="url(#filter-ModalInfo-2)"
                      xlink:href="#path-ModalInfo-1"
                    ></use>
                    <ellipse
                      stroke-opacity="0.338068182"
                      stroke="#FFFFFF"
                      stroke-width="0.255938697"
                      stroke-linejoin="square"
                      :fill="props.dotColor"
                      fill-rule="evenodd"
                      cx="1.4433567"
                      cy="10.4439893"
                      rx="1.31538735"
                      ry="1.31601998"
                    ></ellipse>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps(['dotSize', 'dotColor']);
</script>
