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.

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;
    }
})

  • 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 Aug 30 '18 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.