|
|

楼主 |
发表于 2025-11-10 18:29
|
显示全部楼层
本帖最后由 马黑黑 于 2025-11-10 23:23 编辑
一楼源码共参考:
- <style>
- .mainBox { margin: 0 auto; padding: 0 20px 20px 20px; height: 95vh; display: flex; flex-direction: column; background: linear-gradient(to right top, beige, silver); border-radius: 10px; }
- #pathBox, #resultBox { width: 100%; min-height: 100px; padding: 10px; tab-size: 4; box-sizing: border-box; resize: none; }
- #resultBox { height: 100%; }
- #msvg { width: 100%; height: 100%; }
- .mainBox button { margin-left: 16px; }
- .tMid { text-align: center; }
- .tRight { text-align: right; }
- .item { width: 100%; height: 100%; }
- .item1 { flex: 2; }
- .item2 { flex: 4; }
- .item3 { flex: 1; }
- </style>
- <div class="mainBox">
- <div class="item item1">
- <h2 class="tMid">处理SVG path d路径数据</h2>
- <textarea id="pathBox" placeholder="输入 d 路径数据">M0 0 C-100 100,100 100,0 0</textarea>
- <p class="tRight">
- <input id="cbFill" type="checkbox" name="chkbox" value="fill" checked />
- <label for="cbFill">填充</label>
- <input id="cbStroke" type="checkbox" name="chkbox" value="stroke" />
- <label for="cbStroke">描边</label>
- <button id="btnBegin" type="button" value="btn">生成SVG图像</button>
- <button id="btnGetCode" type="button">获取SVG代码</button>
- </p>
- </div>
- <div class="item item2">
- <svg id="msvg">
- <symbol id="symbol1">
- <path id="path1" />
- </symbol>
- <use id="use1" x="0" y="0" width="200" height="200" href="#symbol1" />
- </svg>
- </div>
- <div class="item item3">
- <textarea id="resultBox" placeholder="信息区" readonly></textarea>
- </div>
- </div>
- <script type="text/javascript">
- const ns = 'http://www.w3.org/2000/svg';
- const cbFill = document.getElementById('cbFill');
- const cbStroke = document.getElementById('cbStroke');
- const use = document.getElementById('use1');
- const sym = document.getElementById('symbol1');
- const path = document.getElementById('path1');
- const strokeColor = 'magenta';
- const fillColor = 'plum';
- cbFill.onclick = () => {
- use.setAttribute('fill', cbFill.checked ? fillColor : 'none');
- };
- cbStroke.onclick = () => {
- use.setAttribute('stroke', cbStroke.checked ? 'magenta' : 'none');
- };
- btnBegin.onclick = () => {
- const pathData = pathBox.value.trim();
- if (isInvalidD(pathData)) {
- resultBox.value = '路径不合法,请检查好后再试!';
- return;
- }
- const { x, y, width, height } = getVBoxFromPath(pathData);
- sym.setAttribute('viewBox', `${Math.ceil(x - 2)} ${Math.ceil(y - 2)} ${Math.ceil(width + 4)} ${Math.ceil(height + 4)}`);
- resultBox.value = `viewBox(${Math.round(x)} ${Math.round(y)} ${Math.round(width)} ${Math.round(height)})`
- path.setAttribute('d', pathData);
- if (cbFill.checked) use.setAttribute('fill', fillColor);
- if (cbStroke.checked) use.setAttribute('stroke', strokeColor);
- };
- btnGetCode.onclick = () => {
- resultBox.value = msvg.outerHTML;
- }
- function getVBoxFromPath(pathstr) {
- const tsvg = document.createElementNS(ns, 'svg');
- tsvg.setAttribute('width', '0');
- tsvg.setAttribute('height', '0');
- const path = document.createElementNS(ns, 'path');
- path.setAttribute('d', pathstr);
- tsvg.appendChild(path);
- document.body.appendChild(tsvg);
- const resultData = path.getBBox();
- document.body.removeChild(tsvg);
- return resultData;
- }
- function isInvalidD(s) {
- const reEverythingAllowed = /[MmZzLlHhVvCcSsQqTtAa0-9-,.\s]/g;
- const bContainsIllegalCharacter = !!s.replace(reEverythingAllowed,'').length;
- const bContainsAdjacentLetters = /[a-zA-Z][a-zA-Z]/.test(s);
- const bInvalidStart = /^[0-9-,.]/.test(s);
- const bInvalidEnd = /.*[-,.]$/.test(s.trim());
- return bContainsIllegalCharacter || bContainsAdjacentLetters || bInvalidStart || bInvalidEnd;
- }
- </script>
复制代码
|
|