可以標記SVG元素以供以后檢索嗎？

我的 HTML 檔案中有許多動態生成的 SVG。它們包含（在其他元素中）一些<text>元素，有點像這樣：

<svg>
    // bunch of other elements
    <text x="50" y="25" text-anchor="middle" dominant-baseline="central" class="myclass">info 1</text>
    <text x="50" y="75" text-anchor="middle" dominant-baseline="central" class="myclass">info 2</text>
    // more other elements
</svg>

是否有類似idorname屬性的東西可以用于這兩段文本，以便我以后可以動態更改它們？id應該在整個檔案中是唯一的，我有很多這樣的 SVG。name在 SVG 中似乎意味著不同的東西（與 HTML 表單相反），并且在任何情況下都可能被棄用。我猶豫要不要使用class，因為這實際上與樣式無關，而且我不希望與檔案中可能存在的其他樣式發生奇怪的沖突。（我無法控制使用我的代碼的檔案或其樣式表。）我也不想在整個檔案中搜索我正在尋找的元素，因為我已經有了一個指向其父級的指標。理想情況下，我會做這樣的事情：

mySVG.getChildByType("type1").innerHTML = "here's new text";

（需要注意的是，每個類似的 SVG 都有一個這樣的"type1“`孩子，可以被抓住和弄亂。）

謝謝。

uj5u.com熱心網友回復：

不清楚你想要什么；聽起來您想要一種方法來獲取特定 SVG 中的文本元素？

在這種情況下，請使用以下內容：

document.querySelectorAll("svg > text")[0].textContent = "I am the new string";

現在 querySelectorAll() 只使用 CSS 選擇器，因此您可以將其中的 svg 替換為 .class、#id，或者只使用您想要的任何 CSS 選擇器。

uj5u.com熱心網友回復：

您可以使用相當冗長的類名來避免意外覆寫從全域 css 繼承的樣式。
例如，像影像滑塊、媒體播放器、地圖助手等腳本/庫中常用的類似 BEM 的命名方案。

如果您的 svg 文本元素是動態編譯的，您可以運行一個添加基于索引的 ID/類屬性的函式：

const parentSvgs = document.querySelectorAll('.mySvg');
setAutoIds(parentSvgs);

function setAutoIds(parents) {
  parents.forEach(function(parent, p) {
    let parentIdentifier = 'mySvg__parent--'   p;
    parent.id = parentIdentifier;
    parent.classList.add(parentIdentifier);
    let children = parent.querySelectorAll('.mySvg__text');
    children.forEach(function(child, c) {
      let childIdentifier = `mySvg__text--${p}-${c}`;
      child.id = childIdentifier;
      child.classList.add(childIdentifier);
      child.classList.add(`mySvg__text--${c}`);
    })
  })
}

//auto content example
setIndexedContent(parentSvgs);

function setIndexedContent(parents) {
  parents.forEach(function(parent, p) {
    let children = parent.querySelectorAll('.mySvg__text');
    children.forEach(function(child, c) {
      child.textContent = `svg nr.${p 1} info nr.${c 1}`;
    });
  });
}

// single text element selected by ID or class
document.getElementById('mySvg__text--1-3').textContent = 'unique text by ID';
document.getElementById('mySvg__text--1-2').textContent = 'unique text by Class';

.mySvg {
  display: inline-block;
  width: 20vw;
  border: 1px dotted #ccc;
}

.mySvg__text {
  font-size: 10px;
}

.mySvg__text--0 {
  fill: orange
}

.mySvg__text--1 {
  fill: green
}

.mySvg__text--2 {
  fill: red
}

<svg class="mySvg" viewBox="0 0 100 100">
    <text x="50" y="25" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
    <text x="50" y="50" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
      <text x="50" y="75" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
</svg>

<svg class="mySvg" viewBox="0 0 100 100">
    <text x="50" y="10" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
    <text x="50" y="20" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
    <text x="50" y="30" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
      <text x="50" y="40" text-anchor="middle" dominant-baseline="central" class="mySvg__text">info</text>
</svg>

這樣，您可以應用共享的 css 樣式，但也可以根據其全域索引選擇單個元素。

uj5u.com熱心網友回復：

我不確定你為什么認為id它不可用。您說您正在動態生成 SVG。我認為這意味著在運行時。所以只需id同時生成一個。如果需要，請為其添加前綴，以確保它是唯一的。

textElement.setAttribute("id", "my-prefix-"   nextTextElemIndex);

也沒有什么能阻止您添加自己的自定義屬性。然后使用屬性選擇器為元素設定樣式。

circle[foo="middle"] {
  fill: green;
}

<svg viewBox="0 0 300 100">
  <circle cx="50" cy="50" r="50" fill="red" foo="left"/>
  <circle cx="150" cy="50" r="50" fill="red" foo="middle"/>
  <circle cx="250" cy="50" r="50" fill="red" foo="right"/>
</svg>

標籤：javascript svg

上一篇：如何在React中匯入SVG圖示

下一篇：EmberFontAwesome不顯示一些免費的svg圖示