D3影像SVG未顯示-有解無憂

我想在 svg 圓圈內填充影像，但由于圓形定位，請避免像此 D3 影像 SVG 未顯示

我得到了正確的位置，元素在那里，但它沒有出現。
影像標簽 AFAIK 已正確放置，但它只顯示href我xlink:href什至沒有寫'xlink:href'

如果我更改defs為group（將影像直接附加到組），它可以作業并將影像放在圓圈上方，我不知道如何剪輯它。我已經使用了 ClipPath 但無法正常作業。

D3 影像 SVG 未顯示

完整代碼示例：Codepen 鏈接

更新：

在這里沒有找到任何好的答案，我選擇附加 div 而不是 svgs，它適用于更多的行

uj5u.com熱心網友回復：

如果您不想使用圖案，您可以改為使用圓圈剪輯影像。

在下一個示例中，我使用了一個圓和一個以點 x=0,y=0 為中心的影像。接下來，我將影像轉換到所需的位置，即您的代碼中的那個位置是圓的中心。影像被圓圈剪裁。

<svg viewBox="0 0 1100 600" style="background-color: steelblue;">

  <defs>
    <image id="chara_avatar" xlink:href="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2070&amp;q=80" width="189.63000000000002" height="126.42000000000002" x="-94.185" y="-63.21"></image>
    <clipPath id="cp">
      <circle id="c" r="63.21000000000001" style="fill:red; stroke: black; stroke-width: 3px; cursor: pointer;"></circle>
    </clipPath>
  </defs>


    <use transform="translate(509,526.75)" xlink:href="#chara_avatar" clip-path="url(#cp)"></use>
    <use transform="translate(641.6925207050258,483.6355864801444)" xlink:href="#chara_avatar" clip-path="url(#cp)"></use>


</svg>

你可以對每個圈子做同樣的事情。

uj5u.com熱心網友回復：

這可以通過<image>在所需的適當位置添加盡可能多的 SVG 元素來實作。

然后，您將在其中使用<clipPath>with<circle>并將每個圓形 clipPath“鏈接”到每個<image>. 同樣，每個圓圈的位置應該與它必須剪輯的影像相匹配。

附加了一個作業代碼筆

片段：


<svg viewBox="0 0 1100 600" style="background-color: steelblue;">

  <defs>
    <clipPath id="clip-circle-0">
      <circle r="50" cx="100" cy="100"></circle>
    </clipPath>
  </defs>


  <image  href="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2070&amp;q=80" x="50" y="50" width="100" height="100" style="clip-path: url(#clip-circle-0)"></image>


</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/412194.html

標籤：

上一篇：Vue3動態影像

下一篇：將影像動態渲染為模態形式的影像映射陣列