Placing div with content within SVG vector? : web_design

By Prosyscom
In March 14, 2018
106 Views

[ad_1]

Hello!

I would very much like other web designers opinion on how to place content within the bounds of a SVG graphic. I have googled for similar questions, but have not found anything to get me in the right direction. I’m very new to utilizing vector graphics, so there might be a much simpler solution…

Here’s an illustration of what I’m trying to achieve: https://i.gyazo.com/b0996c0d64fa74f0495c6a31e2a2b611.png

My first instinct was to separate the left, top, and right side of the vector and export these as different SVG files. Then do something similar to:

<div class="container">
 <svg class="left-side"></svg>
 <svg class="top"></svg>
 <svg class="right-side"></svg>
 <div class="content"></div>
</div>

And then I used CSS absolute positioning to position the SVG elements relative to their container. Although this made it very difficult to position the different parts in a predictable way, especially when my site is suppose to be responsive.

My question is there any better way of doing it? And if so how? Any help is highly appreciated!

[ad_2]

قالب وردپرس