將改進混亂時鐘的網頁版

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 17:16

gemini pro：

代码：全选

Here is the modified section of the code. You only need to replace the `// 5. If ckmode is "number"` section with the following block. 

All code and comments are written in English as requested.

```javascript
            // 5. If ckmode is "number"
            else if (ckmode === "number") {
                const ckvalue = obj.getAttribute("ckvalue");
                
                if (ckvalue) {
                    const values = ckvalue.split(",").map(v => parseInt(v.trim()));
                    const presentNumbers = new Set(values);
                    
                    // Coordinates for missing numbers (scale 0.7,0.7)
                    // Left side for odd numbers
                    const leftCoords = [
                        "translate(-120,-172) scale(0.7,0.7)",
                        "translate(-160,-160) scale(0.7,0.7)",
                        "translate(-172,-120) scale(0.7,0.7)",
                        "translate(-172,120) scale(0.7,0.7)",
                        "translate(-160,160) scale(0.7,0.7)",
                        "translate(-120,172) scale(0.7,0.7)"
                    ];
                    
                    // Right side for even numbers
                    const rightCoords = [
                        "translate(120,-172) scale(0.7,0.7)",
                        "translate(160,-160) scale(0.7,0.7)",
                        "translate(172,-120) scale(0.7,0.7)",
                        "translate(172,120) scale(0.7,0.7)",
                        "translate(160,160) scale(0.7,0.7)",
                        "translate(120,172) scale(0.7,0.7)"
                    ];

                    let leftIndex = 0;
                    let rightIndex = 0;

                    // Step 5a: Find missing numbers (1-12) and place them on the sides
                    for (let num = 1; num <= 12; num++) {
                        if (!presentNumbers.has(num)) {
                            const tileIndex = num - 1;
                            if (tileElements[tileIndex]) {
                                if (num % 2 !== 0) {
                                    // Odd number goes to the left
                                    tileElements[tileIndex].setAttribute("transform", leftCoords[leftIndex]);
                                    leftIndex++;
                                } else {
                                    // Even number goes to the right
                                    tileElements[tileIndex].setAttribute("transform", rightCoords[rightIndex]);
                                    rightIndex++;
                                }
                            }
                        }
                    }

                    // Step 5b: Place the valid numbers provided in the input
                    values.forEach((val, positionIndex) => {
                        // Only process valid numbers (ignore 0)
                        if (val > 0 && val <= 12) {
                            const tileIndex = val - 1; 
                            if (tileElements[tileIndex] && translateArray[positionIndex]) {
                                tileElements[tileIndex].setAttribute("transform", translateArray[positionIndex]);
                            }
                        }
                    });
                }
            }
```

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 22:16

增加功能：每隔12秒就自動保存。如果第一個的類名不是「.ejautolocal」，那就新增並插入至第一位；如果是，則覆蓋保存。

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 22:20

gemini fast：

代码：全选

To implement the auto-save feature every 12 seconds, you need to add a periodic timer and logic to handle the `.ejautolocal` class.

Here are the specific modifications for your script:

### 1. Add the Auto-Save Logic and Interval
Add this block at the end of your script or after the existing event listeners. It defines the `autoSave` function and sets up the 12-second interval.

```javascript
// Function to handle auto-save every 12 seconds
function autoSave() {
    let etmainclone = etmain.cloneNode(true);
    let etmaincwait = etmainclone.querySelector(".etwait");
    if (etmaincwait) etmaincwait.remove();
    
    let data = etmainclone.outerHTML;
    const base64Data = 'data:image/svg+xml;base64,' + btoa(data);
    
    const firstImg = dataarea.firstElementChild;

    if (firstImg && firstImg.classList.contains('ejautolocal')) {
        // Update existing auto-save slot
        firstImg.src = base64Data;
    } else {
        // Create new auto-save slot and insert at the first position
        const img = document.createElement('img');
        img.src = base64Data;
        img.classList.add('ejtilesvgdata', 'ejautolocal');
        dataarea.insertBefore(img, dataarea.firstChild);
    }
    
    saveState();
    updateLocalStorage();
}

// Start interval for auto-saving every 12 seconds
setInterval(autoSave, 12000);
```

---

### 2. Update `updateLocalStorage`
Ensure that the `ejautolocal` class is preserved when reloading from `localStorage`. Modify the `updateLocalStorage` function to track classes:

```javascript
function updateLocalStorage() {
    const images = document.querySelectorAll('.ejtilesvgdata');
    let minimizels = localStorage.getItem("minimizels");
    localStorage.clear();
    images.forEach((img, index) => {
        // Store both src and class information
        const data = {
            src: img.src,
            isAuto: img.classList.contains('ejautolocal')
        };
        localStorage.setItem(`svg_${index}`, JSON.stringify(data));
    });
    localStorage.setItem("minimizels", minimizels);
}
```

---

### 3. Update `loadFromLocalStorage`
Modify the loading logic to parse the stored JSON and re-apply the `ejautolocal` class if necessary:

```javascript
function loadFromLocalStorage() {
    const svgKeys = [];
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith('svg_')) {
            const rawData = localStorage.getItem(key);
            try {
                const item = JSON.parse(rawData);
                svgKeys.push({ key, src: item.src, isAuto: item.isAuto });
            } catch (e) {
                // Fallback for old simple string data
                svgKeys.push({ key, src: rawData, isAuto: false });
            }
        }
    }
    svgKeys.sort((a, b) => {
        const numA = parseInt(a.key.replace('svg_', ''), 10);
        const numB = parseInt(b.key.replace('svg_', ''), 10);
        return numA - numB;
    });
    dataarea.innerHTML = '';
    svgKeys.forEach(item => {
        const img = document.createElement('img');
        img.src = item.src;
        img.classList.add('ejtilesvgdata');
        if (item.isAuto) img.classList.add('ejautolocal');
        dataarea.appendChild(img);
    });
}
```

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 22:25

竟然能上傳js文件了？

增加每12秒自動保存到localstorage。

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 07:18

時針分針秒針：

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 08:51

修改自動保存邏輯：

自動保存不會在頁面加載時自動開啟，也不再只能保存到第一個。

當點擊#update時，它將處於select狀態，再點擊下面dataarea的其中一個img時，此img邊框色變#a72，它將每隔7秒自動保存到那個img所指向的數據。當再次點擊update時，選中狀態消失，停止自動保存。

在保存時，img的左上角會短暫出現一個綠色的加號，可直接使用add內的svg圖案。

當開啟自動保存和關閉自動保存時，才會把當前數據放進undo stack中，在自動保存期間不會自動保存進undo stack。

只需給出所要修改的地方，所有的代碼和注釋都要使用英文。

代码：全选

Here are the specific modifications needed to implement the new auto-save logic. 

### 1. Add new global variables for the auto-save interval
Place these near your existing global variables (like `let deleteMode = false;`, `let historyIndex = -1;`):

```javascript
// New global variables for target-based auto-saving
let autoSaveInterval = null;
let autoSaveTarget = null;
// Ensure dataarea is relative so the absolute-positioned plus sign aligns correctly
dataarea.style.position = 'relative';
```

### 2. Update the `dataarea` click listener
Replace your current `dataarea.addEventListener` block with this updated version to handle selecting the target image and triggering the 7-second auto-save interval:

```javascript
dataarea.addEventListener('click', function(event) {
    const target = event.target;
    if (target.classList.contains('ejtilesvgdata')) {
        if (deleteMode) {
            deleteSvg(target);
            deleteMode = false;
        } else if (updateMode) {
            // Remove border from previously targeted image if one exists
            if (autoSaveTarget) {
                autoSaveTarget.style.border = ''; 
            } else {
                // Push to undo stack only when turning on auto-save for the first time
                saveState(); 
            }
            
            // Set new auto-save target and style it
            autoSaveTarget = target;
            autoSaveTarget.style.border = '2px solid #a72';
            
            // Clear any existing interval to restart the 7-second timer
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
            }
            
            // Start auto-saving to this specific target every 7 seconds
            autoSaveInterval = setInterval(autoSaveTick, 7000);
            
        } else {
            etmain.outerHTML = atob(target.src.split(',')[1]);
            etinit();
            recordHistory();
        }
        setButtonBorder();
    }
});
```

### 3. Update the `updateButton` click listener
Replace your current `updateButton.addEventListener` block. This controls stopping the auto-save, resetting borders, and pushing the final state to the undo stack.

```javascript
updateButton.addEventListener('click', function() {
    if (updateMode == true) {
        updateMode = false;
        
        // Stop auto-save and push to undo stack
        if (autoSaveInterval) {
            clearInterval(autoSaveInterval);
            autoSaveInterval = null;
        }
        if (autoSaveTarget) {
            autoSaveTarget.style.border = ''; // Remove the #a72 border
            autoSaveTarget = null;
            saveState(); // Push to undo stack when turning off auto-save
        }
    } else {
        updateMode = true;
        deleteMode = false;
    }
    setButtonBorder();
});
```

### 4. Replace the old `autoSave` logic
Delete your existing `function autoSave()` and `setInterval(autoSave, 12000);` at the very bottom of the file. Replace them with these two new functions to handle the timed saving and visual indicator:

```javascript
// Function to show a temporary green plus sign on the top-left of the target image
function showSaveIndicator(img) {
    const addSvg = document.querySelector('#add svg');
    const plusIndicator = addSvg.cloneNode(true);
    
    // Position the SVG over the target image
    plusIndicator.style.position = 'absolute';
    plusIndicator.style.top = img.offsetTop + 'px';
    plusIndicator.style.left = img.offsetLeft + 'px';
    plusIndicator.style.width = '24px';
    plusIndicator.style.height = '24px';
    plusIndicator.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    plusIndicator.style.borderRadius = '2px';
    plusIndicator.style.zIndex = '10';
    
    // Change the SVG path stroke to green
    const paths = plusIndicator.querySelectorAll('path');
    paths.forEach(p => p.setAttribute('stroke', '#0f0'));
    
    dataarea.appendChild(plusIndicator);
    
    // Remove the indicator after 500 milliseconds
    setTimeout(() => {
        plusIndicator.remove();
    }, 500);
}

// Function to handle auto-saving to the selected target every 7 seconds
function autoSaveTick() {
    if (!autoSaveTarget) return;
    
    let etmainclone = etmain.cloneNode(true);
    let etmaincwait = etmainclone.querySelector(".etwait");
    if (etmaincwait) etmaincwait.remove();
    
    let data = etmainclone.outerHTML;
    const base64Data = 'data:image/svg+xml;base64,' + btoa(data);
    
    autoSaveTarget.src = base64Data;
    
    // Update local storage WITHOUT pushing to the undo stack
    updateLocalStorage();
    
    // Show visual confirmation on the image
    showSaveIndicator(autoSaveTarget);
}
```

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 09:06

代码：全选

<svg preserveAspectRatio="xMidYMid meet" id="etmain" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" rotatestart="0" stepvalue="180" snapto="0" displaywait="1">   <g id="tile0" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-9" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">1</text>

</g><g id="tile1" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">2</text>

</g><g id="tile2" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">3</text>

</g><g id="tile3" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-16" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">4</text>

</g><g id="tile4" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">5</text>

</g><g id="tile5" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-15" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">6</text>

</g><g id="tile6" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="18" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">7</text>

</g><g id="tile7" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-15" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">8</text>

</g>


<g id="tile8" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">9</text>

</g><g id="tile9" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-20" y="14" stroke="none" fill="##5D4037" font-size="40" font-family="ZT Nature">10</text>

</g><g id="tile10" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-16" y="14" stroke="none" fill="##5D4037" font-size="40" font-family="ZT Nature">11</text>

</g><g id="tile11" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-21" y="14" stroke="none" fill="##5D4037" font-size="40" font-family="ZT Nature">12</text>

</g></defs> <g class="etdrop" stroke="#777" stroke-width="2" stroke-linejoin="round" transform="translate(240,240) scale(1)"><g class="etboard">
<path d="M -240,-240 L -240,240 L 240,240 L 240,-240 Z" stroke="none" fill="lightblue" class="cclokbg"></path>
<circle r="180" cx="0" cy="0" fill="#e7e7e7" stroke="purple" stroke-width="7" class="bcenter0"></circle>
<circle r="172" cx="0" cy="0" fill="#decfaa" stroke="purple" stroke-width="2" class="bcenter0"></circle>

<circle r="6" cx="-72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="-144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

 <style>
@font-face {
    font-family: 'ZT Nature';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
</style>

  <path transform="scale(1.5) translate(-1.63,-65.4)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#e43" d="M 1.68,-9.55 1.71,-10 c 0,0 0.01,0.05 0.03,0.14 C 1.76,-9.94 1.78,-10 1.78,-10 l 0.03,0.44 c 0.47,2.23 2.78,12.20 6.69,13.96 0,0 -2.05,0.43 -5.16,4.38 1.85,-1.32 3.68,-1.71 4.30,-1.80 0.39,-0.05 0.39,0.04 0.61,0.37 0,0 -0.07,0.33 -0.07,0.34 -0.15,0.22 -0.19,0.18 -0.44,0.26 -0.86,0.28 -3.27,1.31 -4.74,3.87 v 0.55 c 1.02,-0.61 2.01,-0.86 2.62,-0.94 0.01,0 0.14,-0.01 0.14,-0.01 0.12,0.02 0.25,0.01 0.35,0.08 0.00,0.00 0.19,0.31 0.19,0.31 -0.02,0.12 -0.01,0.25 -0.07,0.35 -0.01,0.03 -0.07,0.11 -0.39,0.23 -0.88,0.33 -2.12,1.13 -2.85,2.41 l -0.06,21.21 c 0.79,0.43 1.32,1.28 1.32,2.25 0,1.01 -0.58,1.89 -1.44,2.30 0.01,0.08 0.03,0.17 0.03,0.27 -0.07,4.24 3.26,8.87 3.39,9.05 l 0.00,0.00 c 0.28,0.38 0.28,0.90 0,1.29 0,0 -0.89,1.23 -1.76,3.02 -0.72,1.47 -1.44,3.33 -1.59,5.19 2.77,0.56 4.86,3.02 4.86,5.96 0,3.35 -2.72,6.08 -6.08,6.08 -3.35,0 -6.08,-2.72 -6.08,-6.08 0,-2.97 2.13,-5.45 4.95,-5.98 -0.32,-3.98 -3.24,-8.02 -3.36,-8.19 l -0.00,-0.00 c -0.28,-0.38 -0.28,-0.90 0,-1.29 l 0.00,-0.00 c 0.12,-0.17 3.47,-4.81 3.39,-9.05 0,-0.09 0.00,-0.18 0.03,-0.27 -0.85,-0.41 -1.44,-1.29 -1.44,-2.30 0,-0.96 0.53,-1.81 1.32,-2.25 l 0.06,-21.21 c -0.09,-0.17 -0.22,-0.36 -0.36,-0.55 -1.10,-1.44 -2.52,-1.87 -2.57,-1.90 -0.10,-0.06 -0.23,-0.10 -0.30,-0.19 -0.00,-0.00 -0.08,-0.35 -0.07,-0.36 0.06,-0.10 0.09,-0.23 0.19,-0.30 0.19,-0.13 0.21,-0.09 0.44,-0.07 0.73,0.08 1.74,0.39 2.68,0.95 v -0.55 c -0.46,-0.81 -1.62,-2.51 -4.04,-3.60 -0.19,-0.08 -0.50,-0.21 -0.76,-0.29 -0.22,-0.07 -0.25,-0.05 -0.38,-0.24 -0.00,-0.00 -0.07,-0.34 -0.07,-0.34 0.06,-0.09 0.10,-0.22 0.19,-0.29 0.19,-0.13 0.20,-0.10 0.43,-0.07 0.95,0.14 2.42,0.59 3.77,1.44 0.16,0.10 0.33,0.21 0.51,0.34 -3.11,-3.94 -5.17,-4.38 -5.17,-4.38 3.91,-1.75 6.22,-11.73 6.69,-13.96 z m 2.32,60.15 c -0.56,-0.87 -1.56,-2.57 -2.33,-4.57 -0.76,2.00 -1.77,3.70 -2.33,4.58 0.56,0.87 1.55,2.56 2.32,4.56 0.25,-0.65 0.52,-1.28 0.80,-1.85 0.57,-1.16 1.15,-2.12 1.53,-2.71 z m -2.38,11.78 c -1.67,0 -3.04,1.36 -3.04,3.04 0,1.67 1.36,3.04 3.04,3.04 1.67,0 3.04,-1.36 3.04,-3.04 0,-1.67 -1.36,-3.04 -3.04,-3.04 z" fill-rule="evenodd" id="path1029"></path>

  <path transform="rotate(90) scale(1.2) translate(-6.17,-54.816)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#2ad" d="m 2.23,48.31 c -0.60,-1.23 -2.04,-3.40 -5.12,-3.94 -0.71,-0.12 -1.22,-0.10 -1.22,-0.10 -0.19,-0.05 -0.41,-0.07 -0.58,-0.19 -0.00,-0.00 -0.30,-0.47 -0.29,-0.48 0.17,-0.62 0.10,-0.78 0.75,-0.89 1.86,-0.31 6.15,-0.16 9.12,4.30 l 0.01,-1.07 c 0,0 -0.41,-4.26 -5.38,-6.53 0,0 3.81,-2.24 5.28,-6.70 -1.03,-0.50 -1.75,-1.57 -1.75,-2.81 0,-3.17 1.74,-12.86 2.13,-15.19 0.04,-0.32 0.07,-0.52 0.07,-0.55 0.00,-0.19 -0.01,-0.37 -0.03,-0.51 -0.03,-0.23 -0.09,-0.41 -0.12,-0.50 -0.00,-0.01 -0.00,-0.02 -0.01,-0.03 -0.01,-0.05 -0.81,-2.69 -2.25,-4.98 -0.84,-1.34 -1.88,-2.61 -3.20,-2.87 -0.37,-0.07 -0.80,0.02 -1.19,-0.03 -0.50,-0.07 -0.91,-0.47 -0.98,-0.98 -0.01,-0.11 -0.01,-0.23 0,-0.34 0.07,-0.50 0.47,-0.91 0.98,-0.98 0.39,-0.05 0.82,0.03 1.19,-0.03 1.32,-0.26 2.35,-1.53 3.20,-2.87 1.44,-2.28 2.24,-4.92 2.25,-4.98 0.64,-3.00 1.12,-4.94 1.12,-4.94 0,0 0.48,1.94 1.12,4.94 0.01,0.05 0.81,2.69 2.25,4.98 0.84,1.34 1.88,2.61 3.20,2.87 0.37,0.07 0.80,-0.02 1.19,0.03 0.50,0.07 0.91,0.47 0.98,0.98 0.01,0.11 0.01,0.23 0,0.34 -0.07,0.50 -0.47,0.91 -0.98,0.98 -0.39,0.05 -0.82,-0.03 -1.19,0.03 -1.32,0.26 -2.35,1.53 -3.20,2.87 -1.44,2.28 -2.24,4.92 -2.25,4.98 -0.00,0.01 -0.00,0.02 -0.01,0.03 -0.02,0.08 -0.08,0.26 -0.12,0.50 -0.02,0.14 -0.03,0.31 -0.03,0.51 0,0.03 0.02,0.23 0.07,0.55 0.39,2.33 2.13,12.02 2.13,15.19 0,1.23 -0.71,2.30 -1.75,2.81 1.46,4.45 5.28,6.70 5.28,6.70 -4.96,2.27 -5.38,6.53 -5.38,6.53 l 0.01,1.07 c 2.28,-3.44 5.22,-4.10 6.42,-4.30 1.48,-0.23 2.75,-0.00 2.77,0.00 0.17,0.09 0.39,0.16 0.51,0.32 0.00,0.00 0.15,0.56 0.15,0.56 -0.09,0.15 -0.14,0.35 -0.29,0.47 -0.37,0.28 -0.41,0.17 -0.88,0.19 -1.64,0.06 -4.47,0.81 -6.05,4.05 2.19,1.33 3.65,3.74 3.65,6.49 0,3.39 -2.22,6.26 -5.29,7.24 -1.46,0.53 -3.00,0.49 -4.59,0 -3.07,-0.97 -5.29,-3.85 -5.29,-7.24 0,-2.75 1.46,-5.16 3.66,-6.49 z m 3.93,2.69 c -2.09,0 -3.80,1.70 -3.80,3.80 0,2.09 1.70,3.80 3.80,3.80 2.09,0 3.80,-1.70 3.80,-3.80 0,-2.09 -1.70,-3.80 -3.80,-3.80 z m 0,-52.46 c -0.37,0.83 -0.84,1.76 -1.39,2.63 -0.69,1.09 -1.51,2.09 -2.45,2.82 0.93,0.72 1.76,1.73 2.45,2.82 0.55,0.87 1.02,1.80 1.39,2.63 0.37,-0.83 0.84,-1.76 1.39,-2.63 0.69,-1.09 1.51,-2.09 2.45,-2.82 C 9.08,3.28 8.26,2.28 7.57,1.19 c -0.55,-0.87 -1.02,-1.80 -1.39,-2.63 z" fill-rule="evenodd" id="path900"></path>

<circle r="5" cx="0" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

</g>
<use href="#tile6" fill="#700" stroke="#777" transform="translate(-72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile8" fill="#700" stroke="#777" transform="translate(-144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile9" fill="#700" stroke="#777" transform="translate(-124.708,-72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile10" fill="#700" stroke="#777" transform="translate(-72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile11" fill="#700" stroke="#777" transform="translate(0,-144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile0" fill="#700" stroke="#777" transform="translate(72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile1" fill="#700" transform="translate(124.708,-72) scale(1,1) rotate(0)" class="tiledropped" stroke="#777"></use><use href="#tile2" fill="#700" stroke="#777" transform="translate(144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile3" fill="#700" stroke="#777" transform="translate(124.708,72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile4" fill="#700" stroke="#777" transform="translate(72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile5" fill="#700" stroke="#777" transform="translate(0,144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile7" fill="#700" stroke="#777" transform="translate(-124.708,72) scale(1,1) rotate(0)" class="tilesnapped tiledropped"></use>
</g>
</svg>

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 19:58

數字svg
https://www.freepik.com/free-vector/red ... umbers svg

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 20:52

最終選擇jena：

: kabinett1.png (5.86 KiB) 查看 1348 次

: kabinett2.png (5.89 KiB) 查看 1348 次

: jena.png (4 KiB) 查看 1348 次

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 21:24

效果可還行？

代码：全选

<svg preserveAspectRatio="xMidYMid meet" id="etmain" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" rotatestart="0" stepvalue="180" snapto="0" displaywait="1">   <g id="tile0" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-7" y="18" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">1</text>

</g><g id="tile1" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="18" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">2</text>

</g><g id="tile2" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="18" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">3</text>

</g><g id="tile3" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">4</text>

</g><g id="tile4" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="18" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">5</text>

</g><g id="tile5" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">6</text>

</g><g id="tile6" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">7</text>

</g><g id="tile7" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">8</text>

</g><g id="tile8" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-9" y="18" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">9</text>

</g><g id="tile9" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-17" y="18" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">10</text>

</g><g id="tile10" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-16" y="19" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">11</text>

</g><g id="tile11" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-17" y="19" stroke="none" fill="##5D4037" font-size="60" font-family="Jena Gotisch">12</text>

</g></defs> <g class="etdrop" stroke="#777" stroke-width="2" stroke-linejoin="round" transform="translate(240,240) scale(1,1)"><g class="etboard">
<path d="M -240,-240 L -240,240 L 240,240 L 240,-240 Z" stroke="none" fill="#E0E0E0" class="cclokbg"></path>
<circle r="180" cx="0" cy="0" fill="#e7e7e7" stroke="purple" stroke-width="7" class="bcenter0"></circle>
<circle r="172" cx="0" cy="0" fill="#decfaa" stroke="purple" stroke-width="2" class="bcenter0"></circle>

<circle r="6" cx="-72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="-144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

 <style>
@font-face {
    font-family: 'Jena Gotisch';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
</style>

  <path transform="scale(1.5) translate(-1.63,-65.4)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#e43" d="M 1.68,-9.55 1.71,-10 c 0,0 0.01,0.05 0.03,0.14 C 1.76,-9.94 1.78,-10 1.78,-10 l 0.03,0.44 c 0.47,2.23 2.78,12.20 6.69,13.96 0,0 -2.05,0.43 -5.16,4.38 1.85,-1.32 3.68,-1.71 4.30,-1.80 0.39,-0.05 0.39,0.04 0.61,0.37 0,0 -0.07,0.33 -0.07,0.34 -0.15,0.22 -0.19,0.18 -0.44,0.26 -0.86,0.28 -3.27,1.31 -4.74,3.87 v 0.55 c 1.02,-0.61 2.01,-0.86 2.62,-0.94 0.01,0 0.14,-0.01 0.14,-0.01 0.12,0.02 0.25,0.01 0.35,0.08 0.00,0.00 0.19,0.31 0.19,0.31 -0.02,0.12 -0.01,0.25 -0.07,0.35 -0.01,0.03 -0.07,0.11 -0.39,0.23 -0.88,0.33 -2.12,1.13 -2.85,2.41 l -0.06,21.21 c 0.79,0.43 1.32,1.28 1.32,2.25 0,1.01 -0.58,1.89 -1.44,2.30 0.01,0.08 0.03,0.17 0.03,0.27 -0.07,4.24 3.26,8.87 3.39,9.05 l 0.00,0.00 c 0.28,0.38 0.28,0.90 0,1.29 0,0 -0.89,1.23 -1.76,3.02 -0.72,1.47 -1.44,3.33 -1.59,5.19 2.77,0.56 4.86,3.02 4.86,5.96 0,3.35 -2.72,6.08 -6.08,6.08 -3.35,0 -6.08,-2.72 -6.08,-6.08 0,-2.97 2.13,-5.45 4.95,-5.98 -0.32,-3.98 -3.24,-8.02 -3.36,-8.19 l -0.00,-0.00 c -0.28,-0.38 -0.28,-0.90 0,-1.29 l 0.00,-0.00 c 0.12,-0.17 3.47,-4.81 3.39,-9.05 0,-0.09 0.00,-0.18 0.03,-0.27 -0.85,-0.41 -1.44,-1.29 -1.44,-2.30 0,-0.96 0.53,-1.81 1.32,-2.25 l 0.06,-21.21 c -0.09,-0.17 -0.22,-0.36 -0.36,-0.55 -1.10,-1.44 -2.52,-1.87 -2.57,-1.90 -0.10,-0.06 -0.23,-0.10 -0.30,-0.19 -0.00,-0.00 -0.08,-0.35 -0.07,-0.36 0.06,-0.10 0.09,-0.23 0.19,-0.30 0.19,-0.13 0.21,-0.09 0.44,-0.07 0.73,0.08 1.74,0.39 2.68,0.95 v -0.55 c -0.46,-0.81 -1.62,-2.51 -4.04,-3.60 -0.19,-0.08 -0.50,-0.21 -0.76,-0.29 -0.22,-0.07 -0.25,-0.05 -0.38,-0.24 -0.00,-0.00 -0.07,-0.34 -0.07,-0.34 0.06,-0.09 0.10,-0.22 0.19,-0.29 0.19,-0.13 0.20,-0.10 0.43,-0.07 0.95,0.14 2.42,0.59 3.77,1.44 0.16,0.10 0.33,0.21 0.51,0.34 -3.11,-3.94 -5.17,-4.38 -5.17,-4.38 3.91,-1.75 6.22,-11.73 6.69,-13.96 z m 2.32,60.15 c -0.56,-0.87 -1.56,-2.57 -2.33,-4.57 -0.76,2.00 -1.77,3.70 -2.33,4.58 0.56,0.87 1.55,2.56 2.32,4.56 0.25,-0.65 0.52,-1.28 0.80,-1.85 0.57,-1.16 1.15,-2.12 1.53,-2.71 z m -2.38,11.78 c -1.67,0 -3.04,1.36 -3.04,3.04 0,1.67 1.36,3.04 3.04,3.04 1.67,0 3.04,-1.36 3.04,-3.04 0,-1.67 -1.36,-3.04 -3.04,-3.04 z" fill-rule="evenodd" id="path1029"></path>

  <path transform="rotate(90) scale(1.2) translate(-6.17,-54.816)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#2ad" d="m 2.23,48.31 c -0.60,-1.23 -2.04,-3.40 -5.12,-3.94 -0.71,-0.12 -1.22,-0.10 -1.22,-0.10 -0.19,-0.05 -0.41,-0.07 -0.58,-0.19 -0.00,-0.00 -0.30,-0.47 -0.29,-0.48 0.17,-0.62 0.10,-0.78 0.75,-0.89 1.86,-0.31 6.15,-0.16 9.12,4.30 l 0.01,-1.07 c 0,0 -0.41,-4.26 -5.38,-6.53 0,0 3.81,-2.24 5.28,-6.70 -1.03,-0.50 -1.75,-1.57 -1.75,-2.81 0,-3.17 1.74,-12.86 2.13,-15.19 0.04,-0.32 0.07,-0.52 0.07,-0.55 0.00,-0.19 -0.01,-0.37 -0.03,-0.51 -0.03,-0.23 -0.09,-0.41 -0.12,-0.50 -0.00,-0.01 -0.00,-0.02 -0.01,-0.03 -0.01,-0.05 -0.81,-2.69 -2.25,-4.98 -0.84,-1.34 -1.88,-2.61 -3.20,-2.87 -0.37,-0.07 -0.80,0.02 -1.19,-0.03 -0.50,-0.07 -0.91,-0.47 -0.98,-0.98 -0.01,-0.11 -0.01,-0.23 0,-0.34 0.07,-0.50 0.47,-0.91 0.98,-0.98 0.39,-0.05 0.82,0.03 1.19,-0.03 1.32,-0.26 2.35,-1.53 3.20,-2.87 1.44,-2.28 2.24,-4.92 2.25,-4.98 0.64,-3.00 1.12,-4.94 1.12,-4.94 0,0 0.48,1.94 1.12,4.94 0.01,0.05 0.81,2.69 2.25,4.98 0.84,1.34 1.88,2.61 3.20,2.87 0.37,0.07 0.80,-0.02 1.19,0.03 0.50,0.07 0.91,0.47 0.98,0.98 0.01,0.11 0.01,0.23 0,0.34 -0.07,0.50 -0.47,0.91 -0.98,0.98 -0.39,0.05 -0.82,-0.03 -1.19,0.03 -1.32,0.26 -2.35,1.53 -3.20,2.87 -1.44,2.28 -2.24,4.92 -2.25,4.98 -0.00,0.01 -0.00,0.02 -0.01,0.03 -0.02,0.08 -0.08,0.26 -0.12,0.50 -0.02,0.14 -0.03,0.31 -0.03,0.51 0,0.03 0.02,0.23 0.07,0.55 0.39,2.33 2.13,12.02 2.13,15.19 0,1.23 -0.71,2.30 -1.75,2.81 1.46,4.45 5.28,6.70 5.28,6.70 -4.96,2.27 -5.38,6.53 -5.38,6.53 l 0.01,1.07 c 2.28,-3.44 5.22,-4.10 6.42,-4.30 1.48,-0.23 2.75,-0.00 2.77,0.00 0.17,0.09 0.39,0.16 0.51,0.32 0.00,0.00 0.15,0.56 0.15,0.56 -0.09,0.15 -0.14,0.35 -0.29,0.47 -0.37,0.28 -0.41,0.17 -0.88,0.19 -1.64,0.06 -4.47,0.81 -6.05,4.05 2.19,1.33 3.65,3.74 3.65,6.49 0,3.39 -2.22,6.26 -5.29,7.24 -1.46,0.53 -3.00,0.49 -4.59,0 -3.07,-0.97 -5.29,-3.85 -5.29,-7.24 0,-2.75 1.46,-5.16 3.66,-6.49 z m 3.93,2.69 c -2.09,0 -3.80,1.70 -3.80,3.80 0,2.09 1.70,3.80 3.80,3.80 2.09,0 3.80,-1.70 3.80,-3.80 0,-2.09 -1.70,-3.80 -3.80,-3.80 z m 0,-52.46 c -0.37,0.83 -0.84,1.76 -1.39,2.63 -0.69,1.09 -1.51,2.09 -2.45,2.82 0.93,0.72 1.76,1.73 2.45,2.82 0.55,0.87 1.02,1.80 1.39,2.63 0.37,-0.83 0.84,-1.76 1.39,-2.63 0.69,-1.09 1.51,-2.09 2.45,-2.82 C 9.08,3.28 8.26,2.28 7.57,1.19 c -0.55,-0.87 -1.02,-1.80 -1.39,-2.63 z" fill-rule="evenodd" id="path900"></path>

<circle r="5" cx="0" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

</g>
<use href="#tile6" fill="#700" stroke="#777" transform="translate(-72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile8" fill="#700" stroke="#777" transform="translate(-144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile9" fill="#700" stroke="#777" transform="translate(-124.708,-72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile10" fill="#700" stroke="#777" transform="translate(-72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile11" fill="#700" stroke="#777" transform="translate(0,-144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile0" fill="#700" stroke="#777" transform="translate(72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile1" fill="#700" transform="translate(124.708,-72) scale(1,1) rotate(0)" class="tiledropped" stroke="#777"></use><use href="#tile2" fill="#700" stroke="#777" transform="translate(144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile3" fill="#700" stroke="#777" transform="translate(124.708,72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile4" fill="#700" stroke="#777" transform="translate(72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile5" fill="#700" stroke="#777" transform="translate(0,144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile7" fill="#700" stroke="#777" transform="translate(-124.708,72) scale(1,1) rotate(0)" class="tilesnapped tiledropped"></use>
</g>
</svg>

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 22:46

介紹svg如何使用漸變色。

代码：全选

SVG（可縮放向量圖形）中的漸變色（Gradients）主要是透過在 `<defs>`（定義區）中設定漸變規則，然後再將其應用到圖形的 `fill`（填充）或 `stroke`（描邊）屬性上。

SVG 主要提供兩種漸變類型：**線性漸變 (Linear Gradient)** 與 **放射狀漸變 (Radial Gradient)**。

---

## 1. 線性漸變 (Linear Gradient)

線性漸變讓顏色沿著一條直線平滑過渡。你可以透過設定起點 $(x1, y1)$ 和終點 $(x2, y2)$ 來決定漸變的方向（橫向、縱向或斜向）。

### 基本語法
* **`<linearGradient>`**: 定義漸變的 ID 和方向。
* **`<stop>`**: 定義顏色節點。`offset` 表示位置（0% 到 100%），`stop-color` 定義顏色。

```xml
<svg width="200" height="100">
  <defs>
    <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  
  <rect width="200" height="100" fill="url(#lineGrad)" />
</svg>
```


---

## 2. 放射狀漸變 (Radial Gradient)

放射狀漸變是從一個點向外擴散的圓形或橢圓形過渡。

### 核心參數
* **`cx`, `cy`**: 定義漸變的最外圈圓心位置（預設為 50%）。
* **`r`**: 半徑。
* **`fx`, `fy`**: 定義漸變的**焦點**（顏色開始發散的點），可以創造出光源偏移的效果。

```xml
<svg width="150" height="150">
  <defs>
    <radialGradient id="radGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);" />
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" fill="url(#radGrad)" />
</svg>
```


---

## 3. 進階技巧與注意事項

### 漸變方向控制表
調整 `<linearGradient>` 的座標可以快速改變方向：

| 方向 | x1 | y1 | x2 | y2 |
| :--- | :--- | :--- | :--- | :--- |
| **水平 (左到右)** | 0% | 0% | 100% | 0% |
| **垂直 (上到下)** | 0% | 0% | 0% | 100% |
| **對角線** | 0% | 0% | 100% | 100% |

### `gradientUnits` 屬性
這是新手最常踩的坑，它決定了座標的參照對象：
* **`objectBoundingBox` (預設)**：座標相對於圖形本身（0 到 1 之間）。
* **`userSpaceOnUse`**：座標相對於整個 SVG 畫布的像素位置。

### 擴展路徑
如果你想讓漸變應用在邊框上，只需將屬性改為：
`stroke="url(#yourID)"`

> **小撇步**：在現代網頁開發中，如果你覺得手寫 XML 太麻煩，推薦使用 Figma 或 Illustrator 繪製後匯出，再觀察其產生的 `<defs>` 結構，這是學習複雜漸變最快的方法！

你有特定的圖案想要實作漸變效果嗎？或是對焦點 `fx/fy` 的運作還有疑問？

不放在defs內是否也可以？

代码：全选

簡單來說：**不行，SVG 漸變色必須定義在 `<defs>`（或至少是 SVG 結構內的某個地方）並透過 ID 引用。**

這與 CSS 不同。在 CSS 中，你可以直接寫 `background: linear-gradient(...)`；但在 SVG 中，漸變被視為一種**「伺服單元」（Server Element）**，必須先定義好一個「配方」，圖形才能去呼叫它。

不過，關於如何使用漸變，這裡有幾個你可能會感興趣的「非典型」方法與替代方案：

---

### 1. 為什麼一定要有 ID？
SVG 的設計邏輯是將**形狀（幾何）**與**填充（樣式）**分離。漸變包含很多參數（顏色、位置、透明度、座標系），如果直接塞進 `rect` 的屬性裡，標籤會變得極度混亂。

因此，標準流程永遠是：
1.  在 `<defs>` 裡定義漸變並給它一個 `id="myGradient"`。
2.  在圖形中使用 `fill="url(#myGradient)"`。

---

### 2. 「不放在 `<defs>`」的替代方案

雖然不能直接寫在屬性裡，但你有幾種變通方式：

#### A. 放在 SVG 任何地方（不推薦）
其實漸變標籤不一定要包在 `<defs>` 裡面，直接丟在 `<svg>` 下面也可以運作。
```xml
<svg>
  <linearGradient id="badPractice">...</linearGradient> <circle fill="url(#badPractice)" ... />
</svg>
```
> **缺點：** 這樣做漸變標籤會被瀏覽器視為「要渲染的物件」（雖然它本身不具視覺形狀），這會影響代碼的可讀性，有時甚至會造成渲染引擎的小 bug。**`<defs>` 的存在是為了告訴瀏覽器：「這裡面的東西先存起來，等一下呼叫再用」。**

#### B. 使用內聯 CSS (Inline CSS)
如果你是不想在 HTML 結構裡看到那麼多 XML 標籤，你可以利用 CSS 變數，但**依然需要**在某個地方定義一次漸變：
```xml
<style>
  .my-circle { fill: url(#coolGrad); }
</style>
<circle class="my-circle" cx="50" cy="50" r="40" />
```

#### C. 使用網格填充 (Mesh Gradient) 
這是 SVG 2.0 的提案，允許更複雜的色彩過渡，但目前**瀏覽器支援度非常低**，且實作起來比 `linearGradient` 複雜得多。

---

### 3. 如果你真的討厭 `<defs>`...
有一種「偽漸變」的方法：**使用多層不同透明度的形狀疊加**。

如果你只是想要簡單的明暗變化，可以疊加一個半透明的黑白遮罩，這樣就不用寫漸變定義：
```xml
<rect width="100" height="100" fill="blue" />
<rect width="100" height="100" fill="black" opacity="0.2" /> ```
但這並不是真正的漸變，無法達到平滑的顏色過渡。

---

### 總結
在 SVG 的世界裡，**`<defs>` + `id` 引用**是目前唯一且標準的使用漸變方式。如果你覺得這讓 HTML 很亂，建議可以：
1. 將常用的漸變定義在一個隱藏的全局 SVG 中，其他地方直接引用 ID。
2. 使用前端框架（如 React/Vue）將漸變定義封裝成組件。

你是在開發時遇到程式碼管理上的困擾，還是因為特定需求（例如動態產生漸變）才想避開 `<defs>` 呢？

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 22:49

對比css的漸變。

代码：全选

這是一個非常好的切入點！雖然 CSS 和 SVG 漸變的視覺效果相似，但它們的**設計哲學**和**渲染邏輯**完全不同。

簡單來說：**CSS 漸變是「背景裝飾」，而 SVG 漸變是「向量資源」。**

以下是它們的核心對比：

---

### 1. 語法結構：直接 vs. 引用

這是開發者感受最明顯的差異：

* **CSS (內聯式)**：漸變直接寫在屬性值中。它是「即用即丟」的，如果你要在多個地方使用相同的漸變，必須重複寫代碼或使用 CSS 變數。
    ```css
    background: linear-gradient(90deg, red, blue);
    ```
* **SVG (結構式)**：漸變是一個獨立的 XML 節點（`<linearGradient>`）。你必須先定義它，然後給它一個 `id`，最後再引用它。
    ```xml
    <linearGradient id="g1">...</linearGradient>
    <rect fill="url(#g1)" />
    ```

---

### 2. 座標系統與靈活性

這是兩者最大的能力差距：

| 特性 | CSS 漸變 | SVG 漸變 |
| :--- | :--- | :--- |
| **方向控制** | 使用角度（如 `45deg`）或關鍵字（`to right`）。 | 使用座標點 $(x1, y1)$ 到 $(x2, y2)$。 |
| **精準度** | 較難精確控制顏色在哪個像素點開始與結束。 | 可以精確定位，且能隨向量路徑變形。 |
| **焦點偏移** | 放射狀漸變（`radial-gradient`）雖然能設定中心，但調整有限。 | 提供 `fx`, `fy`（焦點），能做出極其逼真的立體光源效果。 |
| **參照對象** | 通常相對於容器（Box Model）的大小。 | 可以選擇相對於圖形本身（BoundingBox）或整個畫布。 |

---

### 3. 應用對象

* **CSS**：主要用於 HTML 元素的 `background` 或 `border-image`。它能處理矩形容器，但很難應用在複雜的「形狀邊緣」（除非使用 `mask`）。
* **SVG**：可以應用在任何路徑（Path）、文字（Text）或複雜的向量圖形上。例如，你可以讓一段**文字的邊框（Stroke）**呈現漸變色，這在純 CSS 中非常難實現。

---

### 4. 效能與渲染

* **CSS 漸變**：由瀏覽器的 CSS 引擎處理，效能極高，適合大面積背景，且支援 GPU 加速。
* **SVG 漸變**：作為 DOM 的一部分，如果頁面上有數千個帶有獨立漸變的向量圖形，DOM 節點過多可能會導致效能下降。但它的優勢在於**縮放不失真**。

---

### 總結：我該選哪一個？

* **選 CSS 漸變的情境**：
    * 網頁背景、按鈕、裝飾性的 UI 元素。
    * 需要快速開發、代碼簡潔。
    * 簡單的顏色過渡。

* **選 SVG 漸變的情境**：
    * **複雜插畫**：需要精確的光影處理（如金屬質感、球體）。
    * **動態效果**：你想用 JS 或 CSS Animation 改變漸變的 `stop-color` 或座標位移。
    * **特殊填充**：例如讓一個五角星或一段草寫文字填充漸變。



> **有趣的小知識**：其實你可以在 CSS 裡面引用 SVG 漸變！你可以把 SVG 寫成 DataURI 放在 CSS 的 `background-image` 裡。這在某些需要「極致兼容性」或「特殊漸變方向」的場景下非常有用。

你目前是在處理網頁的 UI 介面，還是在製作動態的數據圖表呢？

ejsoon · 帖子由 **ejsoon** » 2026年 4月 19日 00:56

代码：全选

<svg width="150" height="150">
  <defs>
    <radialGradient id="radGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);" />
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" fill="url(#radGrad)" />
</svg>

svg漸變球。

ejsoon · 帖子由 **ejsoon** » 2026年 4月 19日 01:17

為一個r=24的圓寫一個svg的漸變背景，從7,7中心發散，從白色到淺藍色，使少量的淺藍色留在右下。

代码：全选

<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="lightBlueGrad" cx="50%" cy="50%" r="50%" fx="7" fy="7" gradientUnits="userSpaceOnUse">
      <stop offset="0%" style="stop-color: white; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: add8e6; stop-opacity: 1" /> </radialGradient>
  </defs>

  <circle cx="24" cy="24" r="24" fill="url(#lightBlueGrad)" />
</svg>

ejsoon · 帖子由 **ejsoon** » 2026年 4月 19日 01:39

可還行？

代码：全选

<svg viewBox="0 0 480 480" preserveAspectRatio="xMidYMid meet" id="etmain" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" rotatestart="0" stepvalue="180" snapto="0" displaywait="1">   <g id="tile0" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-7" y="18" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">1</text>

</g><g id="tile1" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="18" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">2</text>

</g><g id="tile2" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="18" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">3</text>

</g><g id="tile3" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">4</text>

</g><g id="tile4" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="18" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">5</text>

</g><g id="tile5" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">6</text>

</g><g id="tile6" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">7</text>

</g><g id="tile7" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-10" y="19" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">8</text>

</g><g id="tile8" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-9" y="18" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">9</text>

</g><g id="tile9" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-17" y="18" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">10</text>

</g><g id="tile10" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-16" y="19" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">11</text>

</g><g id="tile11" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="url(#lightBlueGrad)" class="bcenter0"></circle>

<text x="-17" y="19" stroke="none" fill="#1B5E20" font-size="60" font-family="Jena Gotisch">12</text>

</g></defs> <g class="etdrop" stroke="#777" stroke-width="2" stroke-linejoin="round" transform="translate(240,240) scale(1,1)"><g class="etboard">
<path d="M -240,-240 L -240,240 L 240,240 L 240,-240 Z" stroke="none" fill="#E0E0E0" class="cclokbg"></path>
<circle r="180" cx="0" cy="0" fill="#e7e7e7" stroke="purple" stroke-width="7" class="bcenter0"></circle>
<circle r="172" cx="0" cy="0" fill="#decfaa" stroke="purple" stroke-width="2" class="bcenter0"></circle>

<circle r="6" cx="-72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="-144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

 <style>
@font-face {
    font-family: 'Jena Gotisch';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
</style>

  <path transform="scale(1.5) translate(-1.63,-65.4)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#e43" d="M 1.68,-9.55 1.71,-10 c 0,0 0.01,0.05 0.03,0.14 C 1.76,-9.94 1.78,-10 1.78,-10 l 0.03,0.44 c 0.47,2.23 2.78,12.20 6.69,13.96 0,0 -2.05,0.43 -5.16,4.38 1.85,-1.32 3.68,-1.71 4.30,-1.80 0.39,-0.05 0.39,0.04 0.61,0.37 0,0 -0.07,0.33 -0.07,0.34 -0.15,0.22 -0.19,0.18 -0.44,0.26 -0.86,0.28 -3.27,1.31 -4.74,3.87 v 0.55 c 1.02,-0.61 2.01,-0.86 2.62,-0.94 0.01,0 0.14,-0.01 0.14,-0.01 0.12,0.02 0.25,0.01 0.35,0.08 0.00,0.00 0.19,0.31 0.19,0.31 -0.02,0.12 -0.01,0.25 -0.07,0.35 -0.01,0.03 -0.07,0.11 -0.39,0.23 -0.88,0.33 -2.12,1.13 -2.85,2.41 l -0.06,21.21 c 0.79,0.43 1.32,1.28 1.32,2.25 0,1.01 -0.58,1.89 -1.44,2.30 0.01,0.08 0.03,0.17 0.03,0.27 -0.07,4.24 3.26,8.87 3.39,9.05 l 0.00,0.00 c 0.28,0.38 0.28,0.90 0,1.29 0,0 -0.89,1.23 -1.76,3.02 -0.72,1.47 -1.44,3.33 -1.59,5.19 2.77,0.56 4.86,3.02 4.86,5.96 0,3.35 -2.72,6.08 -6.08,6.08 -3.35,0 -6.08,-2.72 -6.08,-6.08 0,-2.97 2.13,-5.45 4.95,-5.98 -0.32,-3.98 -3.24,-8.02 -3.36,-8.19 l -0.00,-0.00 c -0.28,-0.38 -0.28,-0.90 0,-1.29 l 0.00,-0.00 c 0.12,-0.17 3.47,-4.81 3.39,-9.05 0,-0.09 0.00,-0.18 0.03,-0.27 -0.85,-0.41 -1.44,-1.29 -1.44,-2.30 0,-0.96 0.53,-1.81 1.32,-2.25 l 0.06,-21.21 c -0.09,-0.17 -0.22,-0.36 -0.36,-0.55 -1.10,-1.44 -2.52,-1.87 -2.57,-1.90 -0.10,-0.06 -0.23,-0.10 -0.30,-0.19 -0.00,-0.00 -0.08,-0.35 -0.07,-0.36 0.06,-0.10 0.09,-0.23 0.19,-0.30 0.19,-0.13 0.21,-0.09 0.44,-0.07 0.73,0.08 1.74,0.39 2.68,0.95 v -0.55 c -0.46,-0.81 -1.62,-2.51 -4.04,-3.60 -0.19,-0.08 -0.50,-0.21 -0.76,-0.29 -0.22,-0.07 -0.25,-0.05 -0.38,-0.24 -0.00,-0.00 -0.07,-0.34 -0.07,-0.34 0.06,-0.09 0.10,-0.22 0.19,-0.29 0.19,-0.13 0.20,-0.10 0.43,-0.07 0.95,0.14 2.42,0.59 3.77,1.44 0.16,0.10 0.33,0.21 0.51,0.34 -3.11,-3.94 -5.17,-4.38 -5.17,-4.38 3.91,-1.75 6.22,-11.73 6.69,-13.96 z m 2.32,60.15 c -0.56,-0.87 -1.56,-2.57 -2.33,-4.57 -0.76,2.00 -1.77,3.70 -2.33,4.58 0.56,0.87 1.55,2.56 2.32,4.56 0.25,-0.65 0.52,-1.28 0.80,-1.85 0.57,-1.16 1.15,-2.12 1.53,-2.71 z m -2.38,11.78 c -1.67,0 -3.04,1.36 -3.04,3.04 0,1.67 1.36,3.04 3.04,3.04 1.67,0 3.04,-1.36 3.04,-3.04 0,-1.67 -1.36,-3.04 -3.04,-3.04 z" fill-rule="evenodd" id="path1029"></path>

  <path transform="rotate(90) scale(1.2) translate(-6.17,-54.816)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#2ad" d="m 2.23,48.31 c -0.60,-1.23 -2.04,-3.40 -5.12,-3.94 -0.71,-0.12 -1.22,-0.10 -1.22,-0.10 -0.19,-0.05 -0.41,-0.07 -0.58,-0.19 -0.00,-0.00 -0.30,-0.47 -0.29,-0.48 0.17,-0.62 0.10,-0.78 0.75,-0.89 1.86,-0.31 6.15,-0.16 9.12,4.30 l 0.01,-1.07 c 0,0 -0.41,-4.26 -5.38,-6.53 0,0 3.81,-2.24 5.28,-6.70 -1.03,-0.50 -1.75,-1.57 -1.75,-2.81 0,-3.17 1.74,-12.86 2.13,-15.19 0.04,-0.32 0.07,-0.52 0.07,-0.55 0.00,-0.19 -0.01,-0.37 -0.03,-0.51 -0.03,-0.23 -0.09,-0.41 -0.12,-0.50 -0.00,-0.01 -0.00,-0.02 -0.01,-0.03 -0.01,-0.05 -0.81,-2.69 -2.25,-4.98 -0.84,-1.34 -1.88,-2.61 -3.20,-2.87 -0.37,-0.07 -0.80,0.02 -1.19,-0.03 -0.50,-0.07 -0.91,-0.47 -0.98,-0.98 -0.01,-0.11 -0.01,-0.23 0,-0.34 0.07,-0.50 0.47,-0.91 0.98,-0.98 0.39,-0.05 0.82,0.03 1.19,-0.03 1.32,-0.26 2.35,-1.53 3.20,-2.87 1.44,-2.28 2.24,-4.92 2.25,-4.98 0.64,-3.00 1.12,-4.94 1.12,-4.94 0,0 0.48,1.94 1.12,4.94 0.01,0.05 0.81,2.69 2.25,4.98 0.84,1.34 1.88,2.61 3.20,2.87 0.37,0.07 0.80,-0.02 1.19,0.03 0.50,0.07 0.91,0.47 0.98,0.98 0.01,0.11 0.01,0.23 0,0.34 -0.07,0.50 -0.47,0.91 -0.98,0.98 -0.39,0.05 -0.82,-0.03 -1.19,0.03 -1.32,0.26 -2.35,1.53 -3.20,2.87 -1.44,2.28 -2.24,4.92 -2.25,4.98 -0.00,0.01 -0.00,0.02 -0.01,0.03 -0.02,0.08 -0.08,0.26 -0.12,0.50 -0.02,0.14 -0.03,0.31 -0.03,0.51 0,0.03 0.02,0.23 0.07,0.55 0.39,2.33 2.13,12.02 2.13,15.19 0,1.23 -0.71,2.30 -1.75,2.81 1.46,4.45 5.28,6.70 5.28,6.70 -4.96,2.27 -5.38,6.53 -5.38,6.53 l 0.01,1.07 c 2.28,-3.44 5.22,-4.10 6.42,-4.30 1.48,-0.23 2.75,-0.00 2.77,0.00 0.17,0.09 0.39,0.16 0.51,0.32 0.00,0.00 0.15,0.56 0.15,0.56 -0.09,0.15 -0.14,0.35 -0.29,0.47 -0.37,0.28 -0.41,0.17 -0.88,0.19 -1.64,0.06 -4.47,0.81 -6.05,4.05 2.19,1.33 3.65,3.74 3.65,6.49 0,3.39 -2.22,6.26 -5.29,7.24 -1.46,0.53 -3.00,0.49 -4.59,0 -3.07,-0.97 -5.29,-3.85 -5.29,-7.24 0,-2.75 1.46,-5.16 3.66,-6.49 z m 3.93,2.69 c -2.09,0 -3.80,1.70 -3.80,3.80 0,2.09 1.70,3.80 3.80,3.80 2.09,0 3.80,-1.70 3.80,-3.80 0,-2.09 -1.70,-3.80 -3.80,-3.80 z m 0,-52.46 c -0.37,0.83 -0.84,1.76 -1.39,2.63 -0.69,1.09 -1.51,2.09 -2.45,2.82 0.93,0.72 1.76,1.73 2.45,2.82 0.55,0.87 1.02,1.80 1.39,2.63 0.37,-0.83 0.84,-1.76 1.39,-2.63 0.69,-1.09 1.51,-2.09 2.45,-2.82 C 9.08,3.28 8.26,2.28 7.57,1.19 c -0.55,-0.87 -1.02,-1.80 -1.39,-2.63 z" fill-rule="evenodd" id="path900"></path>

<circle r="5" cx="0" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

<defs>
<radialGradient id="lightBlueGrad" cx="90%" cy="10%">
  <stop offset="0%" stop-color="#ffffff"/>
  <stop offset="100%" stop-color="#add8e6"/>
</radialGradient>
</defs>

</g>
<use href="#tile6" fill="#700" stroke="#777" transform="translate(-72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile8" fill="#700" stroke="#777" transform="translate(-144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile9" fill="#700" stroke="#777" transform="translate(-124.708,-72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile10" fill="#700" stroke="#777" transform="translate(-72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile11" fill="#700" stroke="#777" transform="translate(0,-144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile0" fill="#700" stroke="#777" transform="translate(72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile1" fill="#700" transform="translate(124.708,-72) scale(1,1) rotate(0)" class="tiledropped" stroke="#777"></use><use href="#tile2" fill="#700" stroke="#777" transform="translate(144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile3" fill="#700" stroke="#777" transform="translate(124.708,72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile4" fill="#700" stroke="#777" transform="translate(72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile5" fill="#700" stroke="#777" transform="translate(0,144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile7" fill="#700" stroke="#777" transform="translate(-124.708,72) scale(1,1) rotate(0)" class="tilesnapped tiledropped"></use>
</g>
</svg>

將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

在线用户