HTML SVG นำกลุ่ม ‹g› มาใช้ซ้ำด้วย ‹use› และเปลี่ยนคุณสมบัติขององค์ประกอบภายในแยกกันสำหรับแต่ละอินสแตนซ์

ด้วยกลอุบายเล็กน้อยก็เป็นไปได้ คุณต้องใช้ประโยชน์จากการสืบทอด CSS เพื่อรับค่าคุณสมบัติบางอย่างภายในองค์ประกอบเงา ในกรณีนี้ จะเป็นตัวแปรที่กำหนดเองซึ่งจะใช้ในการปรับขนาดและตำแหน่งสี่เหลี่ยมผืนผ้า

มาร์กอัปจะต้องเขียนใหม่เล็กน้อยสำหรับสิ่งนี้ ขั้นแรก คุณเขียนกลุ่มของคุณภายในองค์ประกอบ <defs> ทำให้เป็นเทมเพลตสำหรับใช้ซ้ำ แต่ไม่ได้แสดงผลด้วยตัวเอง ประการที่สอง วางสี่เหลี่ยมผืนผ้าไว้ภายในองค์ประกอบ <svg overflow="visible"> ที่ซ้อนกัน การให้พิกัด x/y แก่องค์ประกอบนี้และปล่อยให้องค์ประกอบ <rect> อยู่ที่ 0 ทำให้ง่ายต่อการติดตามว่าด้านซ้ายของสี่เหลี่ยมผืนผ้าจะไปสิ้นสุดที่ใดหลังจากการดำเนินการเปลี่ยนรูป

ตอนนี้ การเปลี่ยนแปลงความกว้างของสี่เหลี่ยมผืนผ้าสามารถทำได้ด้วยการแปลง scaleX() บวก translate() สำหรับตำแหน่ง นี้ต้องอยู่ในไวยากรณ์การแปลง CSS การใช้แอตทริบิวต์ transform จะไม่ทำงาน (ยัง) ดังนั้นเราจึงจำเป็นต้องมีคุณสมบัติ transform-origin ซึ่งตั้งค่าไว้ทางด้านซ้ายขององค์ประกอบ <svg> ที่ล้อมรอบ

แทนที่จะเขียนค่าที่เป็นรูปธรรมสำหรับการปรับขนาด ค่าจะแสดงเป็นตัวแปรโดยมีค่าเริ่มต้น 1: var(--scale, 1); เช่นเดียวกับค่าตำแหน่ง ค่าสำหรับตัวแปรถูกกำหนดไว้ในแอตทริบิวต์ style สำหรับแต่ละองค์ประกอบ <use> แยกกัน: style="--scale:2;--posX:20px; --posY:-10px" สังเกตความจำเป็นในการเขียน px หน่วย!

#my-rect {
    transform-origin: left top;
    transform: translate(var(--posX, 0), var(--posY, 0)) scaleX(var(--scale, 1));
}

<svg height="1000" width="1000">
  <defs>
    <g id="my-group">
      <g>
        <circle r="100" fill="#0000BF" stroke="black" stroke-width="2" fill-opacity="0.8"></circle>
      </g>
      <svg x="-50" y="-50" overflow="visible">
        <rect id="my-rect" height="100" width="50">
        </rect>
      </svg>
    </g>
  </defs>
  <use xlink:href="/th#my-group" x="110" y="110" style="--scale:1"/>
  <use xlink:href="/th#my-group" x="340" y="110" style="--scale:2;--posX:20px; --posY:-10px"/>
</svg>

ฌอน กล่าวว่า:

หากองค์ประกอบที่กำหนดเองของ Web Components ได้รับการขยายไปยังเนมสเปซ SVG
การใช้ซ้ำที่ซับซ้อนมากขึ้นจะเป็นไปได้

ซึ่งเป็นเรื่องจริง คุณไม่สามารถสร้างองค์ประกอบ SVG ที่กำหนดเอง ได้ (ยัง)

แต่คุณสามารถสร้างองค์ประกอบที่กำหนดเองที่สร้าง SVG ได้:

customElements.define("rect-in-circle", class extends HTMLElement{
  connectedCallback(){
    const a = x => this.getAttribute(x);
    this.innerHTML=`<svg viewBox="-100 -100 100 100">`+
                   `<g transform="translate(-50 -50)">`+
                     `<circle r="50" fill="#123456AB"/>`+
                     `<rect y="${a("y")}" height="${a("height")}"`+
                           `x="${a("x")}"  width="${a("width" )}"/>`+
                   `</g></svg>`
  }
});

svg{
  width:100px;
  height:100px;
  background:grey;
  fill:green;
}

<rect-in-circle x=-10 y=-10 width=20 height=20></rect-in-circle>
<rect-in-circle x=-40 y=-20 width=10 height=40></rect-in-circle>
<rect-in-circle x= 10 y= 20 width=30 height= 5></rect-in-circle>

องค์ประกอบที่กำหนดเองสำหรับ SVG เป็นโซลูชันที่ทันสมัยสำหรับการแฮ็ก SVG ของ oldskool จำนวนมาก

อัปเดต

หาก OP ต้องการ หนึ่ง SVG ที่มีวงกลม เราสามารถใช้ shadowDOM และความจริงที่ว่าองค์ประกอบภายใน lightDOM จะไม่แสดง เรายังสามารถใช้องค์ประกอบ unknown <rect> (ในเนมสเปซ HTML) เพื่อให้เราสามารถแทรกองค์ประกอบเหล่านั้นลงในสตริง SVG ได้อย่างง่ายดาย

<script>
  customElements.define("rects-in-circles", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => {
        const rects = [...this.children];
        const width = rects.length * 100;
        this.attachShadow({
          mode: "open"
        }).innerHTML = `<svg viewBox='0 0 ${width} 100'>` + 
          rects.map((rect, idx) => `<g transform='translate(${50+100*idx} 50)'>` +
          `<circle r='50' fill='green'/>` +
          rect.outerHTML +
          `</g>`) + "</svg>";

      })
    }
  });

</script>

<rects-in-circles>
  <rect x=-10 y=-10 width=20 height=20></rect>
  <rect x=-40 y=-20 width=10 height=40></rect>
  <rect x=10 y=20 width=30 height=5></rect>
  <rect x=-40 y=-40 width=50 height=50></rect>
</rects-in-circles>

(my) คำตอบของ StackOverflow ที่เกี่ยวข้อง: องค์ประกอบที่กำหนดเองและ SVG

สิ่งนี้เป็นไปไม่ได้ องค์ประกอบ use สร้าง closed shadow root ซึ่งหมายความว่าเนื้อหาประกอบด้วย ไม่สามารถเข้าถึง JS แม้ว่าคุณจะสามารถตั้งค่าแอตทริบิวต์ของอินสแตนซ์ขององค์ประกอบที่นำมาใช้ซ้ำได้เป็นรายบุคคล (หากไม่ได้ตั้งค่าไว้ในองค์ประกอบดั้งเดิม) คุณจะไม่สามารถส่งผลกระทบต่อองค์ประกอบที่เป็นลูกขององค์ประกอบที่นำมาใช้ซ้ำได้

อีกวิธีหนึ่งคือนำองค์ประกอบสี่เหลี่ยมและวงกลมกลับมาใช้ใหม่โดยตรง และวางไว้ในกลุ่มใหม่

วิธี getAttribute ใช้ไม่ได้สำหรับฉัน แต่วิธีนี้ได้ผล:

customElements.define("source-link", class extends HTMLElement {
    static get observedAttributes() {
        return ['href'];
    }

    get href() {
        return this.getAttribute('href');
    }

    set href(val) {
        if (val) {
            this.setAttribute('href', val);
        } else {
            this.removeAttribute('href');
        }
    }
    connectedCallback(){
        this.innerHTML= '<a href="' + this.href + '" target="_blank" title="source"><svg fill="#37f" viewBox="0 0 512 512" width="16"><g><path d="M488.727,0H302.545c-12.853,0-23.273,10.42-23.273,23.273c0,12.853,10.42,23.273,23.273,23.273h129.997L192.999,286.09    c-9.089,9.089-9.089,23.823,0,32.912c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L465.455,79.458    v129.997c0,12.853,10.42,23.273,23.273,23.273c12.853,0,23.273-10.42,23.273-23.273V23.273C512,10.42,501.58,0,488.727,0z"/></g><g><path d="M395.636,232.727c-12.853,0-23.273,10.42-23.273,23.273v209.455H46.545V139.636H256c12.853,0,23.273-10.42,23.273-23.273    S268.853,93.091,256,93.091H23.273C10.42,93.091,0,103.511,0,116.364v372.364C0,501.58,10.42,512,23.273,512h372.364    c12.853,0,23.273-10.42,23.273-23.273V256C418.909,243.147,408.489,232.727,395.636,232.727z"/></g></svg></a>';
    }
});

การใช้งาน:

<source-link href="//google.com"></source-link>

ที่มา :D