'svg viewBox looks different in vue js

I'm banging my head against the wall trying to understand why my svg viewBox behaves differently in html and in vuejs.

This is my code in vue

<template>
 <div class="venuecontainer" style="background-color:#808040;">
    <svg class="bounds" width=95% height=95% 
    viewbox=" 0 0 100 100" 
    xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="0.5vmin" fill="white" />
    </svg>
</div>
</template>

<script>
export default {
  name: 'VenueView'
}
</script>

<style>
</style>

and this in html

<div class="venuecontainer" style="background-color:#808040;">
    <svg class="bounds" width=95% height=95% 
    viewbox=" 0 0 100 100" 
    xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="0.5vmin" fill="white" />
    </svg>
</div>

I actually copy pasted the relevant part, so the are identical.

However html produces the result I expect:

and the vue code produces this: enter image description here

Why?? Thanks a lot!

htmlvue.js


Solution 1:[1]

FML. It's viewBox not viewbox. Only matters in Vue for obvious reasons.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roland Schützenhofer

Related Questions