我用相同的模式填充了很多路徑。這些路徑屬于同一類。我想單獨更改其中一個路徑中的圖案位置，將圖案放在我想要的位置，但不影響其他路徑中的圖案位置。我該怎么做？
例如，這里我用一個圖案填充了三個矩形。我想通過拖動滑塊來更改 rectA 中圖案的位置。目前在我的代碼中，它將同時更改所有三個形狀中的圖案位置。
<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<svg width="300" height="100">
<defs>
<pattern id="myPattern"
x="0" y="0" width="40" height="40"
patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect id="rotateRect" x="5" y = "5" width = "30" height = "30" fill = " #87CEFA "/>
</pattern>
</defs>
<rect id="rectA" class="myClass" x="0" y="0" width="100" height="100"
style="stroke: #000000;" />
<rect id="rectB" class="myClass" x="100" y="0" width="100" height="100"
style="stroke: #000000;" />
<rect id="rectC" class="myClass" x="200" y="0" width="100" height="100"
style="stroke: #000000;" />
</svg>
<p style=font-size:15px>Move Pattern in Rect A </p>
<input id="slider" type="range" min="0" max="100" value="5" step='1' >
<script>
d3.selectAll(".myClass")
.attr("fill", "url(#myPattern)")
const slider = document.getElementById("slider")
const myPattern = document.getElementById("myPattern")
slider.oninput = function(){
myPattern.setAttribute("patternTransform", "translate(0" "," slider.value ") ")
}
</script>我想要的結果是這樣的：
uj5u.com熱心網友回復：
根本原因是模式id是全域id；第一個定義的id將在所有形狀上設定模式。
所以為每個模式使用一個唯一的模式id
或將其放置
<svg>在帶有 shadowDOM的本機Web 組件中，所以所有id值都是本地（對于 shadowDOM）值：
<svg-squares></svg-squares>
<svg-squares transform="25"></svg-squares>
<svg-squares transform="66"></svg-squares>
<script>
customElements.define("svg-squares", class extends HTMLElement {
connectedCallback() {
this.style.display = "inline-block";
let slider = `<br><input type="range" min="0" max="100" value="5"
oninput="this.getRootNode().host.transform(this.value)">`;
this.attachShadow({mode:"open"})
.innerHTML = `
<svg width="100" height="100">
<defs>
<pattern id="P" width="40" height="40" patternUnits="userSpaceOnUse">
<rect x="5" y="5" width ="30" height="30" fill="#87CEFA"/>
</pattern>
</defs>
<rect fill="url(#P)" width="100" height="100" stroke="black" x="0" y="0"/>
</svg>` slider;
this.transform(this.getAttribute("transform")||0);
}
transform(value) {
this.shadowRoot
.querySelector("pattern")
.setAttribute("patternTransform", `translate(0 ${value})`)
}
})
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/506746.html
上一篇：將C#轉換為VB
下一篇：自動停止SVG影片