I made an svg image in Adobe Illustrator (id="gray-x-button"), and I want to use the svg code as a custom shaped checkbox. Once the user clicks on the checkbox, I want the checkbox to change to a different svg image I made in Illustrator (id="red-x-button"). How would I do that using HTML, CSS, and Javascript? I'm very new to web development, so I've been having trouble even knowing where to begin. All I have right now is my svg code that I exported from Illustrator, which I will post below.
<svg id="gray-x-button" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">s
<defs>
<style>.cls-1-g{fill:url(#linear-gradient);}.cls-2-g{opacity:0.25;}.cls-3-g{fill:#fff;}</style>
<linearGradient id="linear-gradient" x1="187.42" y1="187.55" x2="317.1" y2="317.23" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d1d1d1"/>
<stop offset="0.62" stop-color="#acadaf"/>
<stop offset="1" stop-color="#939598"/>
</linearGradient>
</defs>
<path id="Cross-g" class="cls-1-g" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
<g id="Depth-g" class="cls-2-g">
<path class="cls-3-g" d="M305.08,180.13a4.2,4.2,0,0,1,3,1.25l-2-2a4.25,4.25,0,0,0-6,0l-47.81,47.8-47.81-47.8a4.25,4.25,0,0,0-6,0l-19.19,19.18a4.26,4.26,0,0,0,0,6l2,2a4.26,4.26,0,0,1,0-6l19.19-19.18a4.25,4.25,0,0,1,6,0l47.81,47.8,47.81-47.8A4.2,4.2,0,0,1,305.08,180.13Z" transform="translate(-176 -176.13)"/>
<polygon class="cls-3-g" points="149.28 124.07 103.47 78.27 149.28 124.07 149.28 124.07"/>
<path class="cls-3-g" d="M227.8,256.13l-2-2-46.64,46.64a4.16,4.16,0,0,0,0,5.88l18.72,18.72h0l-16.77-16.77a4.16,4.16,0,0,1,0-5.88Z" transform="translate(-176 -176.13)"/>
</g>
</svg>
<svg id="red-x-button" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">
<defs>
<style>.cls-1-r{fill:#231f20;}.cls-2-r{fill:url(#radial-gradient);}</style>
<radialGradient id="radial-gradient" cx="252.26" cy="252.39" r="74.26" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f7941d"/>
<stop offset="0.2" stop-color="#f4701f"/>
<stop offset="0.43" stop-color="#f14c21"/>
<stop offset="0.65" stop-color="#ef3123"/>
<stop offset="0.85" stop-color="#ed2224"/>
<stop offset="1" stop-color="#ed1c24"/>
</radialGradient>
</defs>
<path id="Cross-r" class="cls-1-r" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
<path class="cls-2-r" d="M303.08,326.66a4.24,4.24,0,0,1-3-1.25L252.26,277.6l-47.81,47.81a4.25,4.25,0,0,1-6,0l-19.19-19.19a4.26,4.26,0,0,1,0-6l47.81-47.81-47.81-47.81a4.26,4.26,0,0,1,0-6l19.19-19.19a4.26,4.26,0,0,1,6,0l47.81,47.8,47.81-47.81a4.26,4.26,0,0,1,6,0l19.19,19.18a4.26,4.26,0,0,1,0,6l-47.81,47.81,47.81,47.81a4.25,4.25,0,0,1,0,6l-19.19,19.19A4.24,4.24,0,0,1,303.08,326.66Z" transform="translate(-176 -176.13)"/>
</svg>
I would prefer to use inline svg code so I can modify it with CSS later. Thanks!
You can find the right answer and further information on this relative post
style-a-checkbox-using-css
I've got an svg with a defs element, like so:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()">
<defs>
<linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d4af37"/>
<stop offset="0.14" stop-color="#fefdfb"/>
<stop offset="0.27" stop-color="#d6b23f"/>
<stop offset="0.45" stop-color="#816e26"/>
<stop offset="0.59" stop-color="#d6b23f"/>
<stop offset="0.82" stop-color="#d6b23f"/>
<stop offset="0.91" stop-color="#fff"/>
<stop offset="1" stop-color="#d6b23f"/>
</linearGradient>
</defs>
<title>StickerBorder</title>
<rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/>
<polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/>
<circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text>
</svg>
I'm appending a couple of children to this via javascript like so :
<lineargradient id="glossgrad" x1="22.3" y1="342.88" x2="227.7" y2="-12.88" gradientunits="userSpaceOnUse">
<stop offset="0" stop-color="#ff0000"></stop>
<stop offset="0.2" stop-color="#ff0000"></stop>
<stop offset="0.4" stop-color="#ff0000"></stop>
</lineargradient>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#glossgrad)"></rect>
So the lineargradient "glossgrad" is being added to the defs element and the rect is being added to the svg element. My problem is, the new appended rect doesn't appear at all. However if I change the url of the rect to the original lineargradient url it appears.
So my question is, does the 'defs' element not get updated once it has had it's initial load? Is it sort of cached or something?
I don't know how you append the new linear gradient definitions and rect element. But to answer your question, there are no issues in dynamically appending new elements to svg defs and using them.
Here is a working example:
var svg = document.getElementsByTagName("svg")[0];
var svgNS = svg.namespaceURI;
createGradient(svg,'glossgrad',[
{offset:'5%', 'stop-color':'#f60'},
{offset:'95%','stop-color':'#ff6'}
]);
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',60);
rect.setAttribute('y',80);
rect.setAttribute('width',50);
rect.setAttribute('height',50);
rect.setAttribute('fill','url(#glossgrad)');
svg.appendChild(rect);
function createGradient(svg,id,stops){
var grad = document.createElementNS(svgNS,'linearGradient');
grad.setAttribute('id',id);
for (var i=0;i<stops.length;i++){
var attrs = stops[i];
var stop = document.createElementNS(svgNS,'stop');
for (var attr in attrs){
if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svg.querySelector('defs') ||
svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild);
return defs.appendChild(grad);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()">
<defs>
<linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d4af37"/>
<stop offset="0.14" stop-color="#fefdfb"/>
<stop offset="0.27" stop-color="#d6b23f"/>
<stop offset="0.45" stop-color="#816e26"/>
<stop offset="0.59" stop-color="#d6b23f"/>
<stop offset="0.82" stop-color="#d6b23f"/>
<stop offset="0.91" stop-color="#fff"/>
<stop offset="1" stop-color="#d6b23f"/>
</linearGradient>
</defs>
<title>StickerBorder</title>
<rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/>
<polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/>
<circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text>
</svg>
I am attempting to create an arrow that looks like this using SVG elements:
This is my attempt:
As you can see the gradient gets applied to both the rect & the polygon in my SVG. Is there a way to replicate the gradient effect in the top image in my SVG?
Maybe theres a CSS way to do this? Maybe I HAVE to use a path or single polygon element to create the arrow instead of a rect & polygon?
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
<polygon points="212,0 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
you can "make" a single path from two shapes by grouping them then apply the gradient to the group
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="424"
height="100"
id="svg2996">
<defs>
<radialGradient cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5" id="grad1">
<stop style="stop-color:#ffffff;stop-opacity:0" offset="0" />
<stop style="stop-color:#0d145d;stop-opacity:1" offset="1" />
</radialGradient>
<radialGradient cx="212" cy="50" r="212" fx="212" fy="50" id="radialGradient3809" xlink:href="#grad1"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.23584906,0,38.207547)" />
</defs>
<g style="fill:url(#radialGradient3809);fill-opacity:1">
<rect width="212" height="50" rx="0" ry="0" x="0" y="25" />
<polygon points="424,50 212,0 212,100 " />
</g>
</svg>
codepen
I used two gradients to attempt to recreate what you were trying to do. You can adjust the center of the gradient to align with the edges of the shapes:
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="100%" cy="50%" r="100%" fx="100%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
<radialGradient id="grad2" cx="0%" cy="50%" r="50%" fx="0%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
<polygon points="212,0 212,100 424,50" fill="url(#grad2)"></polygon>
</svg>
Demo
Is there something wrong with a single polygon though?
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<polygon points="212,0 212,25 0,25 0,75, 212,75 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>