开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >存储CSS clip-path的SVG路径的最佳实践？

问存储CSS clip-path的SVG路径的最佳实践？
EN

Stack Overflow用户

提问于 2018-08-05 22:02:50

回答 1查看 536关注 0票数 0

我一直在尝试使用SVG路径进行CSS裁剪。我终于掌握了它的诀窍。我用Adobe Illustrator制作了一些图形，然后将SVG放入宽度和高度均为0的HTML中，用<clipPath>包装路径，并为其分配一个ID以在clip-path属性中使用。我的问题是:我应该在哪里存储我所有的SVG，以便我可以为它们分配一些ID。将它们放在HTML中似乎不是一个好的做法，特别是当我必须使用多个的时候。我还不能在外部加载所有的标记。

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

EN

回答 1

Stack Overflow用户

发布于 2018-08-06 00:14:04

我听说过一些开发人员将元素放在<div id="ninja" hidden></div>元素中。这适用于那些您想要在页面上显示但不想呈现的元素。

你也可以在需要的时候/以后使用AJAX to download svg文件，如果你觉得它增加了你的文件大小，就把它嵌入到页面上。

我还没有使用svg剪辑路径，即使我已经读到过它们。但是，如果仅将svg文件用于剪辑路径功能，则可以将剪辑路径代码保存在xml文件中，ajax请求它，然后使用一些冗长的javascript将其动态加载到页面上(Stackoverflow Question on how to do what I just said)。

想要从中获得乐趣，请查看svgjs.dev

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51698578

复制

相关文章

CSS3“蒙版(剪切路径)”: clip-path

<!doctype html> <html> <head> <script src="jquery.js"></script> <style> .box{width:400px;height:300px;position:relative;} .box img{width:100%;height:100%;} .mask{width:100%;height:100%;border:solid 5px red;box-sizing:border-box;position:absolute;top:0;le

用户1730674

2018/05/02

8260

CSS3“蒙版(剪切路径)”: clip-path

多云数据存储的最佳实践

文件存储存储对象存储云计算

多云部署为很多组织的数据存储策略带来了许多挑战。通过将大量数据需求的应用程序存储在AWS、谷歌云和Azure等公共云提供程序上，组织的存储基础设施和整体存储管理将变得更加复杂。然而，组织必须接受这种新的复杂性：多云正在迅速成为默认的云计算应用方式，而云计算本身就是组织IT的基础。

静一

2021/02/05

9450

CSS Clip-path Maker

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

小狐狸说事

2022/11/17

8130

CSS Clip-path Maker

MySQL中存储UUID的最佳实践

分布式云数据库 SQL Server unix 数据库 sql

在MySQL中有一个UUID () 函数，通常用UUID做唯一标识，需要在数据库中进行存储。使用此函数可以让MySQL生成一个UUID值，并以VARCHAR(36)类型的可读形式返回。如图1：

leon公众号精选

2022/04/27

9.3K0

MySQL中存储UUID的最佳实践

Android 存储空间的最佳实践

api 数据迁移 android 文件存储存储

为了提高文件的规整程度并让用户可以更好地控制他们的文件，Android 10 为应用引入了名为 "分区存储" 的新范式。分区存储改变了应用在外置存储中保存和访问文件的方式，为了帮您迁移应用并支持分区存储，我们概括了常见用例的最佳实践并分享给大家。

Android 开发者

2022/09/23

1.7K0

Android 存储空间的最佳实践

CSS 3.0的clip-path滚动特效

今天给大家分享一个特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

越陌度阡

2020/11/26

6460

CSS 3.0的clip-path滚动特效

混合云存储的7个最佳实践

存储企业混合云解决方案混合云存储云计算

混合云存储可以帮助企业控制成本，并增加灵活性，还提供其他好处。了解最佳实践并避免陷阱很重要。

静一

2020/11/19

1.7K0

NLP 最佳实践存储库

编程算法 github 机器学习 https NLP技术

此存储库包含构建 NLP 系统的示例和最佳实践，在 jupyter notebook 和实用程序函数中提供。知识库的重点是最先进的方法和常见的场景，这些方法和场景在研究文本和语言问题的研究人员和实践者中很流行。

AI研习社

2019/10/24

7620

干货 | 高频多因子存储的最佳实践

因子挖掘是量化交易的基础。随着历史交易数据日益增多，交易市场量化竞赛的不断升级和进化，量化投研团队开始面对数据频率高、因子数量多的场景，以10分钟线10000个因子5000个股票为例，一年的因子数据约为 2.3T 左右，1分钟线的数据量达到23T，3秒线的数据量将达到460T。如此量级的数据就对因子存储方案提出了很高的要求。

量化投资与机器学习微信公众号

2023/01/03

1.8K0

干货 | 高频多因子存储的最佳实践

TryShape 背后的故事，CSS 剪辑路径属性的展示

我喜欢形状，尤其是彩色的！网站上的形状与背景颜色、图像、横幅、部分分隔符、艺术品等属于同一类别：它们可以帮助我们理解上下文并通过可供性告知我们的行动。

玖柒的小窝

2021/09/10

2.1K0

TryShape 背后的故事，CSS 剪辑路径属性的展示

基于 SVG 的存储型 XSS

svg 网络安全 http

找到一个具有许多功能的目标，包括讨论、发现、混音带、短裤、活动等等。我继续查看用户仪表板。

Khan安全团队

2022/02/24

1.9K0

Electron实现应用更新的坑及路径的最佳实践

命令行工具 node.js electron http

应用内更新的逻辑是，应用内检测受否需要更新，如果需要更新，安装包下载到本地后，进行打开安装，同时关闭当前应用。

码客说

2022/03/09

1.3K0

每天一个小技巧：CSS clip-path 的妙用 Clip Path分类Clippy

css html 编程算法

CSS 的 clip-path 属性是 clip 属性的升级版，它们的作用都是对元素进行 “剪裁”，不同的是 clip 只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形，而 clip-path 更加强大，可以以任意形状去裁剪元素，且对元素的定位方式没有要求。基于这样的特性，clip-path 常用于实现一些炫酷的动画效果。

MudOnTire

2020/07/22

4.1K0

每天一个小技巧：CSS clip-path 的妙用
Clip Path分类Clippy

规模化运行容器时的最佳数据存储路径

kubernetes 容器存储

K8s和其他容器编排平台正在迅速下沉到主流的基础设置中，对于大多数面向业务的应用，从传统的数据中心迁移到容器部署还算独立和简单。然而，当遇到需要像数据库或快速数据分析工作负载这样要求更高的核心应用时，事情不那么简单了。

灵雀云

2022/06/06

5700

规模化运行容器时的最佳数据存储路径

css移动端适配最佳实践

移动端适配，在移动端里经常有遇到，在不同分辨率移动端设备精确还原UI设计稿，这是一个令人抓狂的问题，好在有flex，box布局解决了自适应很大一部分问题。

Maic

2022/12/21

9620

一篇文章带你了解SVG <clippath>剪切路径

SVG剪切路径（也称为SVG剪切）用于根据特定路径剪切SVG形状。路径内部的形状部分可见，外部的部分不可见。

前端进阶者

2021/01/22

2.6K0

【SVG】Path 路径用法详解

SVG Path可用于绘制复杂的路径，如创建线条, 曲线, 弧形等等。其所有属性中，属性d是一个“命令+参数”的序列，用于描述路径，Path强大正在于d属性，因此掌握了d属性成了关键。

Yorkyu

2022/03/22

3.2K0

【SVG】Path 路径用法详解

不再切图！CSS实现渐变提示框（tooltips）

今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的，比如下面这个

秋风的笔记

2021/07/09

1.9K0

巧用 CSS3 中的 clip-path 绘制图形

相信大多数前端同学在面试或者学习的时候都遇到过使用 CSS 绘制正方形、三角形等基础图形的问题，各种奇技淫巧想必大家都运用得比较熟练。本文则介绍了使用 CSS3 中提出的 clip-path 来解决该问题的方法。

逆葵

2019/04/25

1.2K0

巧用 CSS3 中的 clip-path 绘制图形

Elasticsearch最佳实践：不同版本之间的存储成本对比

Elasticsearch Service

作为日志分析场景中最广泛使用的技术解决方案之一，Elasticsearch经常被竞争对手进行比较。特别是随着日志数据量的增加，日志场景中广泛比较的核心指标包括数据写入吞吐量、存储成本、查询速度和分析能力。作为一个不断创新和迭代的产品，Elasticsearch 在日志分析场景中不断引入不同的新功能，以满足客户在日志场景中不断增长的需求。

点火三周

2023/10/25

4.3K0

Elasticsearch最佳实践：不同版本之间的存储成本对比

相似问题

全局存储SVG clipPaths的最佳实践

12

存储svg图标的最佳实践？

32

SVG Polligon指向CSS clip-path

12

包含其他div的div上的svg剪辑路径(无css:clip-path)

116

存储库的路径。所需的最佳实践

40

活动推荐

云联络中心专属优惠，福利大放送！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例