-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (123 loc) · 6.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic SVG Editor</title>
<style>
body {
font-family: Arial, sans-serif;
}
#svg-container {
border: 1px solid #000;
display: inline-block;
margin-top: 20px;
}
.form-group {
margin-bottom: 10px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
</head>
<body>
<h1>Dynamic SVG Editor</h1>
<form id="svgForm">
<div class="form-group">
<label for="toplineText">Top Line Text:</label>
<input type="text" id="toplineText" value="TEXT HERE">
</div>
<div class="form-group">
<label for="bottomlineText">Bottom Line Text:</label>
<input type="text" id="bottomlineText" value="TEXT HERE">
</div>
<div class="form-group">
<label for="backgroundColor">Background Color:</label>
<input type="color" id="backgroundColor" value="#FFFFFF">
</div>
<div class="form-group">
<label for="strokeColor">Stroke Color:</label>
<input type="color" id="strokeColor" value="#635FEE">
</div>
<div class="form-group">
<label for="toplineColor">Top Line Color:</label>
<input type="color" id="toplineColor" value="#635FEE">
</div>
<div class="form-group">
<label for="bottomlineColor">Bottom Line Color:</label>
<input type="color" id="bottomlineColor" value="#635FEE">
</div>
<div class="form-group">
<label for="iconColor">Icon Color:</label>
<input type="color" id="iconColor" value="#635FEE">
</div>
<button type="button" onclick="updateSVG()">Update SVG</button>
<button type="button" onclick="downloadSVG()">Download SVG</button>
</form>
<div id="svg-container">
<svg id="dynamicSVG" width="250" height="54" viewBox="0 0 250 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-130.000000, -73.000000)">
<g transform="translate(130.000000, 73.000000)">
<rect id="backgroundRect" stroke="#635FEE" stroke-width="1" fill="#FFFFFF" x="0.5" y="0.5" width="249" height="53" rx="10"></rect>
<text id="toplineTextElement" font-family="Helvetica-Bold, Helvetica" font-size="9" font-weight="bold" fill="#635FEE">
<tspan x="53" y="20">Your Text</tspan>
</text>
<text id="bottomlineTextElement" font-family="Helvetica-Bold, Helvetica" font-size="21" font-weight="bold" fill="#635FEE">
<tspan x="52" y="40">Your text</tspan>
</text>
<!-- <g transform="translate(201.000000, 13.000000)" fill="#635FEE" id="icon">
<g>
<polygon points="26.0024997 10 15 10 20.5012498 0"></polygon>
<text font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" line-spacing="20">
<tspan x="12.4" y="27">10</tspan>
</text>
</g>
</g> -->
<g transform="translate(11.000000, 12.000000)" id="iconShape">
<path d="M31,15.5 C31,24.0603917 24.0603917,31 15.5,31 C6.93960833,31 0,24.0603917 0,15.5 C0,6.93960833 6.93960833,0 15.5,0 C24.0603917,0 31,6.93960833 31,15.5" fill="#635FEE"></path>
<path d="M17.4329412,15.9558824 L17.4329412,15.9560115 L13.0929412,15.9560115 L13.0929412,11.3060115 L17.4329412,11.3060115 L17.4329412,11.3058824 C18.7018806,11.3058824 19.7305882,12.3468365 19.7305882,13.6308824 C19.7305882,14.9149282 18.7018806,15.9558824 17.4329412,15.9558824 M17.4329412,8.20588235 L17.4329412,8.20601152 L10.0294118,8.20588235 L10.0294118,23.7058824 L13.0929412,23.7058824 L13.0929412,19.0560115 L17.4329412,19.0560115 L17.4329412,19.0558824 C20.3938424,19.0558824 22.7941176,16.6270324 22.7941176,13.6308824 C22.7941176,10.6347324 20.3938424,8.20588235 17.4329412,8.20588235" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<script>
function updateSVG() {
const toplineText = document.getElementById('toplineText').value;
const bottomlineText = document.getElementById('bottomlineText').value;
const backgroundColor = document.getElementById('backgroundColor').value;
const strokeColor = document.getElementById('strokeColor').value;
const toplineColor = document.getElementById('toplineColor').value;
const bottomlineColor = document.getElementById('bottomlineColor').value;
const iconColor = document.getElementById('iconColor').value;
const backgroundRect = document.getElementById('backgroundRect');
const toplineTextElement = document.getElementById('toplineTextElement');
const bottomlineTextElement = document.getElementById('bottomlineTextElement');
const icon = document.getElementById('icon');
const iconShape = document.getElementById('iconShape');
backgroundRect.setAttribute('fill', backgroundColor);
backgroundRect.setAttribute('stroke', strokeColor);
toplineTextElement.setAttribute('fill', toplineColor);
toplineTextElement.querySelector('tspan').textContent = toplineText;
bottomlineTextElement.setAttribute('fill', bottomlineColor);
bottomlineTextElement.querySelector('tspan').textContent = bottomlineText;
icon.setAttribute('fill', iconColor);
iconShape.setAttribute('fill', iconColor);
}
function downloadSVG() {
const svgElement = document.getElementById('dynamicSVG');
const serializer = new XMLSerializer();
const source = serializer.serializeToString(svgElement);
const svgBlob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'custom.svg';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
</script>
</body>
</html>