css 有没有办法导入SVG然后修改它？

fhity93d 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(206)

下面是我将在示例中使用的徽标的端点：https://rdanhgsjebvnzzvsohyx.supabase.co/storage/v1/object/public/assets/logos/logoaidvisor-purple.svg
因此，导入SVG并将其呈现为图像，然后使用Tailwind CSS对其进行样式化，效果非常好：

<img src="https://rdanhgsjebvnzzvsohyx.supabase.co/storage/v1/object/public/assets/logos/logoaidvisor-purple.svg" alt="logo" class="w-28 sm:w-48 md:w-60" />

然而，我找不到一种方法来修改SVG，因为我将能够做的“正常”SVG。

注：我正在一个svelte项目中工作，但我希望找到一个通用的解决方案，无论框架等。*

我试着给图像赋予id通常给予SVG的属性，比如fill：

<img src="https://rdanhgsjebvnzzvsohyx.supabase.co/storage/v1/object/public/assets/logos/logoaidvisor-purple.svg" alt="logo" class="w-28 sm:w-48 md:w-60" fill="#222" />

我以为那会奏效，但事实并非如此。经过大量的研究，我仍然找不到解决办法。

css

来源：https://stackoverflow.com/questions/74852194/is-there-any-way-to-import-an-svg-and-then-modify-it

2条答案

按热度按时间

m0rkklqb1#

如果想影响SVG，就不能使用img，直接内联SVG，这样就可以应用样式，因为它会生成样式所针对的必要元素。
具体的操作方式取决于您的生成系统;很多都有方法导入文件作为字符串内容，所以你可以和{@html ...}一起使用。如果SVG来自DB，你可以创建一个API，然后fetch从那里导入内容。
(Note SVG可能会执行脚本，因此对于其他任何内容，只能使用具有安全/净化内容的@html。）

赞(0）回复(0）举报 2022-12-20

arknldoa2#

您还可以使用外部<use>元素-在方便性方面类似于<img>元素。

将徽标 Package 在<symbol>元素中并应用ID。
从徽标的<path>元素中删除填充属性，并将其添加到<use>元素中
将原始viewBox属性复制到父svg

示例

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.1/tailwind.min.css">

<svg class="w-28 sm:w-48 md:w-60" viewBox="0 0 79 38">
  <use href="#logo" fill="#ccc" />
</svg>

<svg width="0" height="0" viewBox="0 0 79 38" fill="none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="logo" viewBox="0 0 79 38">
<path d="M0 23C0 20.1333 0.533333 17.6167 1.6 15.45C2.7 13.2833 4.18333 11.6167 6.05 10.45C7.91667 9.28333 10 8.7 12.3 8.7C14.2667 8.7 15.9833 9.1 17.45 9.9C18.95 10.7 20.1 11.75 20.9 13.05V9.1H29.45V37H20.9V33.05C20.0667 34.35 18.9 35.4 17.4 36.2C15.9333 37 14.2167 37.4 12.25 37.4C9.98333 37.4 7.91667 36.8167 6.05 35.65C4.18333 34.45 2.7 32.7667 1.6 30.6C0.533333 28.4 0 25.8667 0 23ZM20.9 23.05C20.9 20.9167 20.3 19.2333 19.1 18C17.9333 16.7667 16.5 16.15 14.8 16.15C13.1 16.15 11.65 16.7667 10.45 18C9.28333 19.2 8.7 20.8667 8.7 23C8.7 25.1333 9.28333 26.8333 10.45 28.1C11.65 29.3333 13.1 29.95 14.8 29.95C16.5 29.95 17.9333 29.3333 19.1 28.1C20.3 26.8667 20.9 25.1833 20.9 23.05Z" fill="red" />
<path d="M44.1855 9.1V37H35.6355V9.1H44.1855Z" />
<path d="M48.6816 23C48.6816 20.1333 49.215 17.6167 50.2816 15.45C51.3816 13.2833 52.865 11.6167 54.7316 10.45C56.5983 9.28333 58.6816 8.7 60.9816 8.7C62.815 8.7 64.4816 9.08333 65.9816 9.85C67.515 10.6167 68.715 11.65 69.5816 12.95V0H78.1316V37H69.5816V33C68.7816 34.3333 67.6316 35.4 66.1316 36.2C64.665 37 62.9483 37.4 60.9816 37.4C58.6816 37.4 56.5983 36.8167 54.7316 35.65C52.865 34.45 51.3816 32.7667 50.2816 30.6C49.215 28.4 48.6816 25.8667 48.6816 23ZM69.5816 23.05C69.5816 20.9167 68.9816 19.2333 67.7816 18C66.615 16.7667 65.1816 16.15 63.4816 16.15C61.7816 16.15 60.3316 16.7667 59.1316 18C57.965 19.2 57.3816 20.8667 57.3816 23C57.3816 25.1333 57.965 26.8333 59.1316 28.1C60.3316 29.3333 61.7816 29.95 63.4816 29.95C65.1816 29.95 66.615 29.3333 67.7816 28.1C68.9816 26.8667 69.5816 25.1833 69.5816 23.05Z" />
<path d="M35.6 2.00104C35.6 0.896468 36.4954 0.0010376 37.6 0.0010376H42.6C43.7045 0.0010376 44.6 0.896468 44.6 2.00104V7.00104H37.6C36.4954 7.00104 35.6 6.10561 35.6 5.00104V2.00104Z" />
  </symbol>
</svg>

局限性：严格CORS政策

外部<use>引用必须托管在同一个域中-否则浏览器将由于跨源安全性设置而阻止它们。
其他功能，如梯度，遮罩，剪辑路径等也可能无法工作。
对于像徽标或图标这样的简单用例，它仍然是<img>的合适替代品。
但是，您可以使用svgxuse之类的注入/内联脚本

赞(0）回复(0）举报 2022-12-20

我来回答

css 有没有办法导入SVG然后修改它？

2条答案

示例

局限性：严格CORS政策

相关问题

热门标签

最新问答