code-study-boilerplate/components/svg/facebook-clipped.vue at 28e6d124344e2aa4f5a74ff605b763ae4a4e2e41 · nicwands/code-study-boilerplate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
    <svg
        ref="svgEl"
        width="28"
        height="29"
        viewBox="0 0 28 29"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <defs>
            <clipPath
                id="facebookClip"
                clipPathUnits="objectBoundingBox"
                :transform="clipTransform"
            >
                <path
                    d="M27.7134 14.5664C27.7134 6.91357 21.5096 0.709717 13.8567 0.709717C6.20386 0.709717 0 6.91357 0 14.5664C0 21.4826 5.06717 27.2153 11.6916 28.2548V18.5719H8.17329V14.5664H11.6916V11.5136C11.6916 8.04078 13.7604 6.12249 16.9255 6.12249C18.4411 6.12249 20.0273 6.39313 20.0273 6.39313V9.80318H18.28C16.5588 9.80318 16.0218 10.8714 16.0218 11.9683V14.5664H19.8649L19.2505 18.5719H16.0218V28.2548C22.6462 27.2153 27.7134 21.4826 27.7134 14.5664Z"
                />
            </clipPath>
        </defs>
    </svg>
</template>

<script>
export default {
    data() {
        return {
            svg: {},
        }
    },
    mounted() {
        this.svg = this.$refs.svgEl
    },
    computed: {
        xScale() {
            return 1 / parseInt(this.svg.getAttribute('width'))
        },
        yScale() {
            return 1 / parseInt(this.svg.getAttribute('height'))
        },
        clipTransform() {
            if (!this.svg.getAttribute) return ''
            return `scale(${this.xScale}, ${this.yScale})`
        },
    },
}
</script>