为啥我的 SVG 元素没有出现？ （即使在检查我的网页时）

Posted 2023-03-07

【中文标题】为啥我的 SVG 元素没有出现？ （即使在检查我的网页时）

【英文标题】：Why is my SVG element not appearing? (even when Inspecting my webpage)为什么我的 SVG 元素没有出现？ （即使在检查我的网页时）

【发布时间】：2021-09-22 23:01:49

【问题描述】：

所以我尝试在下拉菜单中包含一个 SVG 元素，并包含了 SVG 属性。但是，任何浏览器似乎都没有考虑过它；即使在检查页面时，我也无法在任何地方找到 SVG 属性。下面是代码示例（注意我使用的是 CSS 的实用框架 Tailwind）。

<select class="font-semi bold text-sm appearance-none bg-gray-200 
        inline-block p-5 px-5 py-2 rounded-2xl ">
  <option value="Categor" disabled selected>Category</option>
  <option value="personal">Personal</option>
  <option value="buisness">Buisness</option>
  <option value="You">You</option>
  <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;"   viewBox="0 0 22 22">
            <g fill="none" fill-rule="evenodd">
                <path stroke="#000" stroke-opacity=".012" stroke-
                      d="M21 1v20.16H.84V1z">
                </path>
                <path fill="#222"
                      d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 
                      1.184-5.04-5.04 5.04-5.04z">
                </path>
            </g>
        </svg>
</select>

我尝试通过将 SVG 元素放置在 select 元素之外但仍位于 span 元素中来更改 SVG 元素的位置。这一次，SVG 元素是可见的。然而 - 自然地 - 它在 select 元素之外，而不是在最右边（即使在检查 span 元素之后，它也清楚地包含“类别”空间。我认为这可能是浏览器问题，所以我尝试了其他那些（我正在使用 Chrome）和 Tailwind playground 上，没有任何变化。有人有解决方案吗？

【参考方案1】：

您将 svg 放入选择标记中。

一个选择标签只接受两个孩子：

选项 选择组

所有其他元素都被忽略。

<!--this works-->
<select>
  <optgroup label="opt group" />
  <option>Option 1</option>
  <option>Option 2</option>
</select>

这两个元素在里面渲染。

让我们看看你的代码：

            <span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" 
                     viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>    
                </select> 

svg 在 select 内。

把它移开！

<span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" 
                     viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>

用于制作右侧的<：

svg 
    position: absolute;
    right:0;

It works when the select is on the top:

svg 
    position: absolute;
    right: 0;

<span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" 
                     viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>

看看如果你有上面的东西会发生什么！它有效：

svg 
  position: absolute;
  right: 0;

<div><strong>this is bold</strong> iqjr 98qc0 v0q89ure qoicqje oqircjoe iaewc r</div>
<span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" 
                     viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>

这也有效：

table 
  width: 100%;

#triangle 
  text-align:right;

<div><strong>this is bold</strong> ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc</div>
<table>
<tr><td><select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                
               </td>
               <td id="triangle">
               <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" 
                     viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>
               </td></tr></table>

但不要使用表格标签。它们带有语义！

表格应该携带数据：

col1	col2
data	more data
data	more data
data	more data

但是如果它没有携带数据呢？

Stack Overflow	Questions
Home	Why is my SVG element not appearing? (even when Inspecting my webpage)
Users	Why is my SVG element not appearing? (even when Inspecting my webpage)

这对屏幕阅读器不利。

所以请改用display:table;。

.faketable 
  display:table;

.faketable>div 
  display:table-row;

.faketable>div>div 
  display:table-cell;
  padding:7px;

<div class="faketable">
<div>
<div>Cell One (aruc b)</div>
<div>Cell Two (ierjc eijac)</div>
</div>
<div>
<div>Cell Three (qrc a)</div>
<div>Cell Four (caf vfjj)</div>
</div>
</div>

所以第二种方法应该更像这样：

.faketable 
  width: 100%;


#triangle 
  text-align: right;


.faketable 
  display: table;


.faketable>div 
  display: table-row;


.faketable>div>div 
  display: table-cell;
  padding: 7px;

<div><strong>this is bold</strong> ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc</div>
<div class="faketable">
  <div>
    <div>
      <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
        <option value="Categor" disabled selected>Category</option>
        <option value="personal">Personal</option>
        <option value="buisness">Buisness</option>
        <option value="You">You </option>

      </select>

    </div>
    <div id="triangle">
      <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;"   viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>
    </div>
  </div>
</div>

如果你想在选择标签内放一张图片，你可以使用自定义下拉菜单：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) 
  coll[i].addEventListener("click", function() 
    this.classList.toggle("active");
    var content = document.getElementById('content');
    if (content.style.display === "block") 
      content.style.display = "none";
     else 
      content.style.display = "block";
    
  );


function hide(element) 
  var x = document.getElementsByClassName("options");
  var i;
  for (i = 0; i < x.length; i++) 
    x[i].style.backgroundColor = "white";
  
  document.getElementById('content').style.display = 'none';
  element.style.backgroundColor = "#00ffff"

.options:hover 
  background-color: #00dddd !important;


#buttons,
.options 
  cursor: pointer;


.options 
  border: 1px solid black;
  background-color: white;


#content 
  position: fixed;
  top: 1em;


svg 
  position: absolute;
  right: 0;

<table>
  <tr>
    <td><button style="width: 100%;" id="buttons" class="collapsible">Click Me</button> <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;"   viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke- d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg> </td>
  </tr>
  <tr>
    <td id="content" style="display:none;" onblur="this.style.display='none';">
      <ul style="list-style:none;">
        <li onclick="hide(this); document.getElementById('buttons').innerhtml=this.innerHTML;" class="options">option 1</li>
        <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 2</li>
        <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 3</li>
      </ul>
    </td>
  </tr>
</table>