Webアプリケーションを公開するまでのつぶやき 4

プロローグはこちら↑。

SVG画像の色を変える

前回のつぶやきでSVG画像の色を変えれないと言っていたのですが、変え方が分かりました。

<template>
  <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
  <g>
    <path class="st0" d="M256,0C159.969,0,82.109,77.859,82.109,173.906c0,100.719,80.016,163.688,123.297,238.719
      C246.813,484.406,246.781,512,256,512s9.188-27.594,50.594-99.375c43.297-75.031,123.297-138,123.297-238.719
      C429.891,77.859,352.031,0,256,0z M256,240.406c-36.734,0-66.516-29.781-66.516-66.5c0-36.75,29.781-66.531,66.516-66.531
      s66.516,29.781,66.516,66.531C322.516,210.625,292.734,240.406,256,240.406z" style="fill: rgb(75, 75, 75);"></path>
  </g>
  </svg>
</template>

これはSVG画像のコンポーネントの１つなのですが、ダウンロードしたままコピペするとこういう感じなのですが、<path>の中の最後のほうにstyleがついているのですが、これがあると色の上書きができないみたいです。
ここを消す事でIconBase.vueのiconColorに設定した色で描画されるようになりました。
rgbでもカラーコードでもどちらでも反映されるようです。

BottomNavigationBar(pixel5)

色をつけたところです。
こんな感じになりました。

ripple effect

AndroidやFlutterではおなじみのMaterialDesignだとボタンをタップした時に波紋のようなエフェクトがかかるんですね。
これをripple effectというのですが、それをつけたい。
できればcssだけで完結させたい。
と思って調べたところ、このコードが参考になりそうだなと思って、同じように実装してみました。

が、うまくいかず。
クリック範囲を円形にしたかったのですが、<button>のwidth、heightを設定したところなぜか要素が右寄りになったりして面倒なので一旦この実装は後回しにします。
あと、クリックした時の枠を消す方法もよくわかってないです。

クリックした時に枠が出る

<script lang="ts">
import { defineComponent, ref } from 'vue';
import IconBase from './icons/IconBase.vue';
import HomeIcon from './icons/HomeIcon.vue';
import MapPinIcon from './icons/MapPinIcon.vue';
import FavoriteIcon from './icons/FavoriteIcon.vue';
import MyPageIcon from './icons/MyPageIcon.vue';

export default defineComponent({
  name: 'BottomTabView',
  components: {
    IconBase,
    HomeIcon,
    MapPinIcon,
    FavoriteIcon,
    MyPageIcon,
  },
  setup(props) {
    const select = ref(0);
  },
});
</script>
<template>
  <div class="w-full fixed bottom-0 inset-x-0">
    <div class="w-full justify-evenly flex bg-light-gray pt-3 pb-6">
      <div><button class="rounded-full border-hidden hover:border-hidden active:border-hidden forcus:border-hidden"><icon-base icon-name="home" width="32" height="32" iconColor="#50C1E9"><home-icon /></icon-base></button></div>
      <div><button class="rounded-full border-hidden hover:border-hidden active:border-hidden forcus:border-hidden"><icon-base icon-name="map-pin" width="32" height="32" iconColor="#50C1E9"><map-pin-icon /></icon-base></button></div>
      <div><button class="rounded-full border-hidden hover:border-hidden active:border-hidden forcus:border-hidden"><icon-base icon-name="favorite" width="32" height="32" iconColor="#50C1E9"><favorite-icon /></icon-base></button></div>
      <div><button class="rounded-full border-hidden hover:border-hidden active:border-hidden forcus:border-hidden"><icon-base icon-name="my-page" width="32" height="32" iconColor="#50C1E9"><my-page-icon /></icon-base></button></div>
    </div>
  </div>
</template>

一旦こんな感じ。
フォーカスした時の枠線を消す事には成功した。

今回はここまで。
また次回宜しくお願い致します。