Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 08:13:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

Simple SVGRectText as foreignObject

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-02-12 01:20:54 +00:00
parent 67c371b483
commit 0a18bdd2a0
1 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/src/components/rects/SVGRectText.vue
View file

@ -1,13 +1,18 @@
<template> <template>
<text <foreignObject
:x="Math.round(parent_aspect_ratio * rectangle.middle.x)" :x="Math.round(parent_aspect_ratio * rectangle.left)"
:y="Math.round(rectangle.middle.y)" :y="rectangle.top"
:width="Math.round(parent_aspect_ratio * rectangle.width)"
:height="rectangle.height"
:style="`transform: scaleX(${1 / parent_aspect_ratio})`" :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
text-anchor="middle"
dominant-baseline="middle"
> >
{{ text }} <div
</text> xmlns="http://www.w3.org/1999/xhtml"
class="is-flex is-align-items-center is-justify-content-center"
>
<div class="is-size-1 has-text-weight-bold">{{ text }}</div>
</div>
</foreignObject>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -54,10 +59,8 @@ export default class extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
text { foreignObject > div {
fill: red; color: red;
height: inherit;
font-weight: bold;
font-size: 50px;
} }
</style> </style>