我想在懸停時增加段的比例，同時保持它們的原始位置看起來像“增加筆畫寬度”（這不是它應該作業的方式，因為我希望整個路徑由“實際路徑”組成)
這樣做時它們也會以某種方式改變位置，看起來執行放大的原點與路徑的中心不對應，而是與左上角相對應。
[1] 變換原點：中心；不是我想在這里做的，因為它將原點設定為影像的中心，而不是路徑的中心。
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" id="logo">
<style type="text/css">
<!-- segments -->
.logo_segment {
fill:#000;
transition: all .2s ease-in-out;
<!-- transform-origin: center; < [1] Doesn't work the way I want to-->
}
.logo_segment:hover {
transform: scale(1.05);
transition: all .2s ease-in-out;
}
</style>
<!-- segments; clockwise, starting left-->
<path stroke="red" stroke-width="5" class="logo_segment" d="m390.56 934.47-3e-3 -369.1-6e-3 6e-3 -300.53-173.36-0.01962 2e-3 -0.002003 715.79h3e-3l300.58-173.35"/>
<path stroke="red" stroke-width="5" class="logo_segment" d="m410.21 531.4 318.07-183.59 2.0982-1.1952-0.02653-345.87 0.00601-0.74104-620.16 357.8-0.67685 0.24497 300.69 173.35"/>
<path stroke="red" stroke-width="5" class="logo_segment" d="m769.58 346.54 320.1 184.8v0.0693l300.57-173.32-0.036-0.0367-619.97-357.68-0.65801-0.36979-0.01 344.55"/>
<path stroke="red" stroke-width="5" class="logo_segment" d="m1109.4 565.35 0.01 369.46v0.01l300.56 173.35 0.053-716.15-0.071-0.0183-300.55 173.35"/>
</svg>
uj5u.com熱心網友回復：
解決此問題的一種方法是確保元素的中心為 0,0。我在示例中添加了一個額外<polygon>的內容，以便您可以看到它以 0,0 為中心。
在示例中，我重用了<polygon>包裝在<g>. 所有轉換都在 上完成<g>，因此唯一的轉換<polygon>是懸停時的比例。
（的點<polygon>是通過反復試驗找到的。它們可以計算出來......）
.logo_segment {
transition: all .2s ease-in-out;
}
.logo_segment:hover {
transform: scale(1.05);
transition: all .2s ease-in-out;
}<svg version="1.1" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" id="logo">
<defs>
<g id="segment">
<polygon class="logo_segment" points="184,150 357,-150 -357,-150 -184,150" stroke="red" stroke-width="5" />
</g>
</defs>
<!--extra polygon to show that center is 0,0 -->
<polygon class="logo_segment" points="184,150 357,-150 -357,-150 -184,150" stroke="red" stroke-width="5" />
<use href="#segment" transform="translate(750 750) rotate(30) translate(0 -510)" fill="gray" />
<use href="#segment" transform="translate(750 750) rotate(90) translate(0 -510)" />
<use href="#segment" transform="translate(750 750) rotate(150) translate(0 -510)" />
<use href="#segment" transform="translate(750 750) rotate(210) translate(0 -510)" />
<use href="#segment" transform="translate(750 750) rotate(270) translate(0 -510)" />
<use href="#segment" transform="translate(750 750) rotate(330) translate(0 -510)" />
</svg>uj5u.com熱心網友回復：
您只需要將 transform-origin:center 與 transform-b??ox:fill-box 結合使用以將框設定為路徑框。
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" id="logo">
<style type="text/css">
<!-- segments -->
.logo_segment {
fill:#000;
transform-origin: center;
transform-box: fill-box;
transition: all .2s ease-in-out;
<!-- transform-origin: center; < [1] Doesn't work the way I want to-->
}
.logo_segment:hover {
transform: scale(1.05);
transition: all .2s ease-in-out;
}
</style>
<!-- segments; clockwise, starting left-->
<path stroke="red" stroke-width="5" class="logo_segment" d="m390.56 934.47-3e-3 -369.1-6e-3 6e-3 -300.53-173.36-0.01962 2e-3 -0.002003 715.79h3e-3l300.58-173.35"/>
<path stroke="red" stroke-width="5" class="logo_segment" d="m410.21 531.4 318.07-183.59 2.0982-1.1952-0.02653-345.87 0.00601-0.74104-620.16 357.8-0.67685 0.24497 300.69 173.35"/>
<path stroke="red" stroke-width="5" class="logo_segment" d="m769.58 346.54 320.1 184.8v0.0693l300.57-173.32-0.036-0.0367-619.97-357.68-0.65801-0.36979-0.01 344.55"/>
<path stroke="red" stroke-width="5" class="logo_segment" d="m1109.4 565.35 0.01 369.46v0.01l300.56 173.35 0.053-716.15-0.071-0.0183-300.55 173.35"/>
</svg>
uj5u.com熱心網友回復：
您必須為 6 個<path>形狀中的每一個計算縮放中心點（實際上是平移）。
使用標準的 JavaScript Web 組件<svg-hexagon>動態創建所有內容。
我把影片留給你：
customElements.define("svg-hexagon", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<svg viewBox="0 0 1500 1500">`
`<style>path{stroke:red;stroke-width:15;fill:lightgreen}path:hover{fill:gold}</style>`
`<g transform="scale(0.8) translate(200 200)"></g></svg>`;
let paths = this.querySelector("g");
let xPos = 360;
for (let i = 0; i < 6; i ) {
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
let pathlocation = `rotate(${i*60} 750 750)`;
path.setAttribute("transform", pathlocation);
path.setAttribute("d", `m${xPos} 935 0-369 0 0-301-173 0 0 0 716h0l301-173`);
paths.append(path);
path.onmouseenter = (e) => {
let {left,top,x,y,width,height } = path.getBBox();
let scale = 1.5;
let cx = -(x (width / 2)) * (scale - 1);
let cy = -(y (height / 2)) * (scale - 1);
path.setAttribute("transform",
`${pathlocation} translate(${cx} ${cy}) scale(${scale})`);
paths.append(path); // put path on top, there is no z-index in SVG
}
path.onmouseleave = (e) => {
if(!e.ctrlKey) path.setAttribute("transform", pathlocation);
}
}
}
})svg-hexagon {
width: 180px;
display: inline-block;
background: rebeccapurple
}<svg-hexagon></svg-hexagon>
<svg-hexagon></svg-hexagon>
<svg-hexagon></svg-hexagon>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484352.html