KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I'm working with an SVG element that should look something like this: (sorry that I have to post this as a link instead of as a picture, but as a new user I didn't have permissions to post images) A border with rounded corners in the middle of a page, but where the the border is removed where header/footer is to be inserted. User-specified text is to be inserted into header, footer and into the frame itself. The rectangle is painted on top of another background (a picture, another rectangle with a color, etc.). I need to find a way to keep the original background, paint only parts of the border and place the text on top of the original background. I have come up with this solution: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 620 1100" preserveAspectRatio="xMidYMid meet"> <defs> <!--Define some texts--> <text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">THIS IS MY HEADER</text> <text id="text2" x="525" y="1010" style="text-anchor:end;font-size:30px;">MY TEXT HERE</text> <mask id="Mask1"> <!--draw the entire screen--> <rect x="0" y="0" width="620" height="1100" style="fill:white;" /> <!--Mask out the two rectangles where text is to be placed--> <rect x="300" y="980" width="350" height="50" style="fill:black;" /> <rect x="90" y="90" width="350" height="40" style="fill:black;" /> </mask> </defs> <!--The original background (here a rect with a fill color, but could also be an image)--> <rect x="0" y="0" width="620" height="1100" style="fill:#f0ffb6"/> <!--Draw the rectangle but applying the mask--> <rect x="100" y="100" rx="20"
Tags (comma-separated)
Save Edits
Cancel