Base Component

Idea

It is very useful to have a SVG-Wrapper, which scales your visualization on the fly.

Example

Show Boundaries

```vue

## Fixed Dimensions
```vue
<Base :height="100" :width="200" boundaries/>

Responsive Dimensions Horizontal with fixed height

```vue

``` ## Responsive Dimensions Horizontal and Vertical

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quo usque tandem abutere, Catilina, patientia nostra?

<Base boundaries/>

Margin

<Base
  :height="100"
  boundaries
  :margin='{"top": 50, "left": 50, "bottom": 50, "right": 50}'
/>

Custom-Styles

Overwrite svg-wrapper styles:

<Base
  :height="100"
  boundaries
  class="my-wrapper-styles"
/>

<style>
.my-wrapper-styles > svg {
  box-shadow: 0 0 5px 0 aliceblue;
  background-color: aliceblue;
}
</style>

Props

• width
• height
• margin