1

I created a Div using HTML/CSS to look like:

enter image description here

Below is the Code:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="white" points="0,0 0,100 100,100"/>
    </svg>
</header>

<section>
</section>
</body>

CSS: 

header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}

svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
}

Now, while I am merging this code in Lightning Component. It is giving me

Failed to save LEFCComponent.cmp: No COMPONENT named markup://svg found : [markup://c:LEFCComponent]: Source

Now, I looked at many articles stating that I can achieve these using Lightning Icons but, the thing am using is just not a simple icon but a Shape. All I want to use that Polygon shape in Lightning Component.

Be gentle, TIA.

Improve this question

2 Answers 2

Reset to default
4

If you want to use SVGs in Lightning, you currently have to "render" them directly. This can end up being fairly non-trivial, but if you absolutely want this effect, you can do so. Here's an example application:

application

<aura:application >
    <div id="root">
    </div>
</aura:application>

CSS

.THIS svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
}
.THIS#root {
    position: relative;
    height: 300px;
    background-image: linear-gradient(#ff9d2f, #ff6126);
}

renderer

({
    render: function(component, helper) {
        var result = this.superRender(),
            xmlns = "http://www.w3.org/2000/svg",
            updateContainer = result[0],
            svg = document.createElementNS(xmlns,"svg"),
            poly = document.createElementNS(xmlns,"polygon");
        poly.setAttributeNS(null, "fill", "white");
        poly.setAttributeNS(null, "points", "0,0 0,100 100,100");
        svg.setAttributeNS(null,"viewBox", "0 0 100 100");
        svg.setAttributeNS(null,"preserveAspectRatio","none");
        svg.appendChild(poly);
        updateContainer.appendChild(svg);
        return result;
    }
})
Improve this answer
1
  • Okay, actually this might work. I was looking for some solution and instead of using SVG, I used CSS Property clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 calc(100% - 15vw) ); . I will try your code and will post if i face any issue. Thanks.
    – Kamal Thakur
    Commented Aug 30, 2018 at 7:34
1

Another option is to render a VF page with the SVG code as image and use that image in the lightning component.

Polygon.page

<apex:page contentType="image/svg+xml">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon fill="white" points="0,0 0,100 100,100"/>
    </svg>
</apex:page>

Polygon.cmp

<aura:component >
    <div class="svgbackground">
        <img src="https://<your VF page domain>.visual.force.com/apex/polygon" />
    </div>
</aura:component>

Polygon.css

.THIS.svgbackground {
    background-image: linear-gradient(#ff9d2f, #ff6126);
}

Note: As of now, I have hardcoded the VF domain name.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .