主页 / 问题 / 1377169
Accepted
Михаил Камахин
Asked:2022-07-02 03:53:06 +0000 UTC2022-07-02 03:53:06 +0000 UTC

如何通过将其连接为单独的文件来影响css中的svg？

  • 772

我想通过将 svg 作为单独的文件包含在 css 中来使用 CSS 伪类 ( :hover, )。:active

我做了这样的，
svg文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./journey-svg.css"?>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="800"
    height="800"
    viewBox="0 0 800 800"
> 

    <defs>
        <style>
        
            #journey {
                fill: var(--journey, black);
            }

        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

但是我无法使用 CSS 到达那里，它看不到 CSS 变量，例如：

<style>
    :root {
        --journey: red;
    }
</style>

<object type="image/svg+xml" data="./images/journey-svg/journey-svg.svg" width="400" height="400"> </object>

但是，如果我只是将 svg 直接插入到文件中，那么一切都会正常工作：

:root {
  --journey: red;
}

#journey-svg {
  --size: 100px;
  width: var(--size);
  height: var(--size);
}

#journey-svg:hover {
  --journey: green;
}

#journey-svg:active {
  --journey: orange;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./journey-svg.css"?>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
  width="800"
    height="800"
    viewBox="0 0 250 250"
  id="journey-svg"
> 

    <defs>
        <style>
        
            #journey {
                fill: var(--journey, black);
        transition: fill 0.2s ease-in-out;
            }

        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

css

3 个回答

  1. 如果您不想将 SVG 内联添加到 HTML，那么您可以添加一个 SVG 文件，<object>但在这种情况下，样式不会直接到达 svg，因为它是一个孤立的对象。

    因此，我们提前将样式放在svg文件中，然后上传到服务器

    这是一个单独的 SVG 文件，路径为 :hover 样式

    <svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="800"
    height="800"
    viewBox="0 0 800 800"
> 

    <defs>
        <style>
        
      #journey {
          fill: black);
       }
            #journey:hover{
            fill:orange;
            }
        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

    现在我们从服务器调用 svg

    <object  type="image/svg+xml" data="https://svg-art.ru/files/journey-svg.svg" width="400" height="400"></object>

    带有精灵的变体（符号）

    为了能够从外部 css 更改样式，您需要删除所有 svg 演示样式（填充、描边、不透明度）<symbol>添加到它的换行路径id="journey"

    将 svg 文件上传到 HTML

    <object  type="image/svg+xml" data="https://svg-art.ru/files/journey-svg.svg" width="400" height="400"></object>

    然后调用任意多次<use>

    <use xlink:href="#journey" />

    SO上有一个完整的svg-sprite部分，您可以看到各种细微差别，解决方案

    • 3
  2. Best Answer

    使用 Sprite 添加 SVG 图标

    如果图标很少，那么<symbol>您可以在不使用 webpack 和其他类似程序的情况下手动制作精灵。一个额外的好处是，一旦你手动编写了一个 sprite，你将永远知道如何设置 webpack 以获得相同的结果。

    从 SVG 图标形成一个精灵

    将图标代码复制到您计划用作精灵的 svg 文件中，并用一个标签将其包装起来，<symbol>并为其提供 ID。

    <symbol id="phone" viewBox="0 0 48 48">
    <path fill="#009688"  d="M39.1,7l-3.7,0C22.2,7.2..... />
</symbol>

    对所有图标重复此操作，分配唯一 ID

    完成的文件必须以 *.svg 扩展名保存并放置在服务器上。

    下面是一个带有两个图标的精灵：id="headphones"和id="phone" viewBox="0 0 48 48"

    viewBox添加以使图标大小相同。

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 100 500" style="border:1px solid">
<symbol id="headphones">
   <path  d="M89 31.3c-1.5-.1-3 .3-4.1 1a38 38 0 0 0-27-25.6c-13-3-26.4 2-35 12a40 40 0 0 0-7.6 13.8 7 7 0 0 0-10.8 6l2 30.2c.4 7.3 10.8 8.7 13.3 1.9-6.4-8.7-8.6-22.4-1.5-31.3v-.1c2-12.6 10.8-24 23.2-27.7A31.3 31.3 0 0 1 75 23c3.4 4.5 5.7 9.7 6.7 15.2v.9c7.3 8.7 5 23-1.4 31.5 2.5 6.8 12.8 5.3 13.3-1.9l2-30.1c.2-3.8-2.7-7.1-6.5-7.3" />
  <path d="M81.5 42.2c-3-5-8.7-7.7-14.5-7.7h-.2c-9.5.7-13 6.2-15.8 12.3l-1 2-.8-2c-2.8-6-7-12.3-16.7-12.3h-.3c-6.3.4-11.8 3.8-14.5 9.7-3 6.5-2 14.4 1 20.8 3.2 6.6 9.1 11.5 14.6 16.2C38.8 86 44.6 90 50.2 94.5c8.7-7.8 18.8-13.9 26.5-22.7 3.6-4 6.1-8.7 7-14.1.8-5.2.6-10.9-2.2-15.5z" />
</symbol>
   <symbol id="phone" viewBox="0 0 48 48">
    <path fill="#009688"  d="M39.1,7l-3.7,0C22.2,7.2,7.1,24.1,7,35.4l0,3.7c0,1,0.8,1.9,1.9,1.9l7.5-0.1c1,0,1.9-0.9,1.9-1.9l0.2-8.2 l-4.7-4c0-2.6,10.5-13.1,13.2-13.2l4.3,4.7l7.9-0.2c1,0,1.9-0.9,1.9-1.9L41,8.9C41,7.8,40.2,7,39.1,7z"  />
   </symbol>
</svg>

    没有显示任何内容，因为它<symbol>隐藏了内容，直到使用 ID 调用图标<use>

    在此之前，您需要将精灵添加到 HTML<object>

    下一步：

    使用 ID 调用图标<use>

     <svg width="100">
    <use id="u1"  xlink:href="#headphones" />
</svg>

    下面是调用和设置图标样式的完整代码：

    svg {
display:block;
}
 #u1,#u2,#u3,#u4 {
 transition:all 0.5s; 
 fill:black;
 }
 #u1:hover {
 fill:red;
 }
 
 #u2:hover {
 fill:dodgerblue;
 } 

  
  #u3:hover {
 fill: yellowgreen;
 } 
 
 #u4:hover {
 fill: purple;
 } 
 
    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 100 500" style="border:1px solid">
<symbol id="headphones">
   <path  d="M89 31.3c-1.5-.1-3 .3-4.1 1a38 38 0 0 0-27-25.6c-13-3-26.4 2-35 12a40 40 0 0 0-7.6 13.8 7 7 0 0 0-10.8 6l2 30.2c.4 7.3 10.8 8.7 13.3 1.9-6.4-8.7-8.6-22.4-1.5-31.3v-.1c2-12.6 10.8-24 23.2-27.7A31.3 31.3 0 0 1 75 23c3.4 4.5 5.7 9.7 6.7 15.2v.9c7.3 8.7 5 23-1.4 31.5 2.5 6.8 12.8 5.3 13.3-1.9l2-30.1c.2-3.8-2.7-7.1-6.5-7.3" />
  <path d="M81.5 42.2c-3-5-8.7-7.7-14.5-7.7h-.2c-9.5.7-13 6.2-15.8 12.3l-1 2-.8-2c-2.8-6-7-12.3-16.7-12.3h-.3c-6.3.4-11.8 3.8-14.5 9.7-3 6.5-2 14.4 1 20.8 3.2 6.6 9.1 11.5 14.6 16.2C38.8 86 44.6 90 50.2 94.5c8.7-7.8 18.8-13.9 26.5-22.7 3.6-4 6.1-8.7 7-14.1.8-5.2.6-10.9-2.2-15.5z" />
</symbol>
   <symbol id="phone" viewBox="0 0 48 48">
    <path fill="#009688"  d="M39.1,7l-3.7,0C22.2,7.2,7.1,24.1,7,35.4l0,3.7c0,1,0.8,1.9,1.9,1.9l7.5-0.1c1,0,1.9-0.9,1.9-1.9l0.2-8.2 l-4.7-4c0-2.6,10.5-13.1,13.2-13.2l4.3,4.7l7.9-0.2c1,0,1.9-0.9,1.9-1.9L41,8.9C41,7.8,40.2,7,39.1,7z"/  />
   </symbol>
</svg>
  <svg width="100">
    <use id="u1"  xlink:href="#headphones" />
</svg>
<svg width="100">   
     <use id="u2"  xlink:href="#headphones"/>
 </svg> 
 <svg width="100" height="100"> 
     <use id="u3"  xlink:href="#phone"   />
 </svg>  
 
 <svg width="100" height="100"> 
     <use id="u4"  xlink:href="#phone"  />
 </svg>

    我们得到结果：耳机图标在 时变色:hover，而听筒没有响应。

    这是因为耳机图标没有表现属性，但听筒图标有 -fill="#009688"并且 SVG 表现风格比外部 CSS 风格更重要。

    每次从 SVG 中删除表示样式是非常昂贵的。但有一条出路 - 应用Computed具有最高优先级的样式。

    使用变量进行样式设置

    在我们的例子中，将使用外部 CSS 中的变量。

    #u1:hover {
 --primary-color: red;
 --second-color: purple;
 }

    也就是说，我们看到您可以同时更改多种颜色。
    这使得风格化多色图标成为可能。

    在 SVG 内部：

    style="fill: var(--second-color, grey)


    svg {
display:inline;
}
 #u1,#u2 {
 transition:all 0.5s; 
 fill:black;
 }
 #u1:hover {
 --primary-color: red;
 --second-color: purple;
 }
 
 #u2:hover {
 --primary-color: red;
 --second-color: dodgerblue;
 } 

  
  #u3:hover {
 --primary-color: yellowgreen;
 } 
 
 #u4:hover {
 --primary-color: purple;
 }
    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 100 500" style="border:1px solid">
<symbol id="headphones">
   <path fill="grey" d="M89 31.3c-1.5-.1-3 .3-4.1 1a38 38 0 0 0-27-25.6c-13-3-26.4 2-35 12a40 40 0 0 0-7.6 13.8 7 7 0 0 0-10.8 6l2 30.2c.4 7.3 10.8 8.7 13.3 1.9-6.4-8.7-8.6-22.4-1.5-31.3v-.1c2-12.6 10.8-24 23.2-27.7A31.3 31.3 0 0 1 75 23c3.4 4.5 5.7 9.7 6.7 15.2v.9c7.3 8.7 5 23-1.4 31.5 2.5 6.8 12.8 5.3 13.3-1.9l2-30.1c.2-3.8-2.7-7.1-6.5-7.3" style="fill: var(--second-color, grey)"/>
  <path fill="grey" d="M81.5 42.2c-3-5-8.7-7.7-14.5-7.7h-.2c-9.5.7-13 6.2-15.8 12.3l-1 2-.8-2c-2.8-6-7-12.3-16.7-12.3h-.3c-6.3.4-11.8 3.8-14.5 9.7-3 6.5-2 14.4 1 20.8 3.2 6.6 9.1 11.5 14.6 16.2C38.8 86 44.6 90 50.2 94.5c8.7-7.8 18.8-13.9 26.5-22.7 3.6-4 6.1-8.7 7-14.1.8-5.2.6-10.9-2.2-15.5z" style="fill: var(--primary-color, grey)"/>
</symbol>
   <symbol id="phone" viewBox="0 0 48 48">
    <path id="pathPhone"  d="M39.1,7l-3.7,0C22.2,7.2,7.1,24.1,7,35.4l0,3.7c0,1,0.8,1.9,1.9,1.9l7.5-0.1c1,0,1.9-0.9,1.9-1.9l0.2-8.2 l-4.7-4c0-2.6,10.5-13.1,13.2-13.2l4.3,4.7l7.9-0.2c1,0,1.9-0.9,1.9-1.9L41,8.9C41,7.8,40.2,7,39.1,7z"/ fill="#009688" style="fill: var(--primary-color, #009688)"/>
   </symbol>
</svg>
  <svg width="100">
    <use id="u1"  xlink:href="#headphones" />
</svg>
<svg width="100">   
     <use id="u2"  xlink:href="#headphones"/>
 </svg> 
 <svg width="100" height="100"> 
     <use id="u3"  xlink:href="#phone"   />
 </svg>  
 
 <svg width="100" height="100"> 
     <use id="u4"  xlink:href="#phone"  />
 </svg>

    • 3

  3. 可以svg直接粘贴到html. 然后浏览器将允许从外部样式访问它。

    svg {
  width: 30px;
}

svg:hover {
  fill: red;
}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
  <path d="M227.7 1.2H25.3a24 24 0 0 0-24 24v197.6a24 24 0 0 0 24 24h202.4a24 24 0 0 0 24-24V25.2a24 24 0 0 0-24-24zm0 24v105L187.2 92a14.8 14.8 0 0 0-22 1.8l-47.7 61.8a8.4 8.4 0 0 1-11.5 1.6l-31-22.7a19.7 19.7 0 0 0-11.3-3.5c-4.8 0-9.2 1.6-12.5 4.4l-25.9 22V25.1h202.4zM93.3 96.4a24.8 24.8 0 1 0 0-49.7 24.8 24.8 0 0 0 0 49.7zm0 0" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
  <path d="M227.7 1.2H25.3a24 24 0 0 0-24 24v197.6a24 24 0 0 0 24 24h202.4a24 24 0 0 0 24-24V25.2a24 24 0 0 0-24-24zm0 24v105L187.2 92a14.8 14.8 0 0 0-22 1.8l-47.7 61.8a8.4 8.4 0 0 1-11.5 1.6l-31-22.7a19.7 19.7 0 0 0-11.3-3.5c-4.8 0-9.2 1.6-12.5 4.4l-25.9 22V25.1h202.4zM93.3 96.4a24.8 24.8 0 1 0 0-49.7 24.8 24.8 0 0 0 0 49.7zm0 0" />
</svg>

    • 0

相关问题