推荐最新

如何在前端项目中简单优雅的使用 svg 图标并且适应排版?

如何在前端项目中简单优雅的使用 svg 图标并且适应排版? 我 clone 了一个项目改改改 "https://github.com/zauberzeug/nicegui" (https://link.segmentfault.com/?enc=MxL2tFafDecgXepXsXbQlw%3D%3D.hGZ0e4eRLzI%2BcztWVlh%2BPFxQMvo8Nnxd3vXTRVAG2jAnkuwHdvtSLsuqli4juEW7) "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/fab7df2701c8a9011d9c9f8108ef3dd0.png) 原版项目右上角是一个 github 的图标："https://github.com/zauberzeug/nicegui/blob/main/website/static/github.svg" (https://link.segmentfault.com/?enc=8zRZYLtnmbWt8r6fXQB72g%3D%3D.mR8YkosYrX5jLNPxht2YNLAi8Rbe6fOwEFr0AVbVME%2BrCvtabfGU3NHsOmSF7AVFdp1IukkJZ6rMjyoHPWcpdtxgZeDLGX80CRo8j3f3RuE%3D) 因为我的项目是 gitlab 的，所以我想把 github.svg 改成 gitlab.svg 所以我去 aliyun 的 icon 站点找了一个 gitlab 图标："https://www.iconfont.cn/search/index?searchType=icon&q=gitlab%20" (https://link.segmentfault.com/?enc=tD93qYO3mg8IxHjYHEFiQA%3D%3D.GBFqnWiWVRYaQB6eBm278bv2KFgwAHu9oSdZn4wz%2Bi%2FS6mM8V1TZTezIffds3ZfoK7BWzoRfA10s8bBFjdBWdgX0OGAYc83%2FR2G31W08Z7I%3D) 并且复制了它的 svg 代码 "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/404946e33053b82993808f5ca8f8fb39.png) 然后复制到我的项目中使用，但是这个 svg 图标变得非常的大！！！ "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/e8ba4d18afad1cb7a002d824c756f87f.png) 我只想简单优雅的使用，最好可以无脑自适应，要怎么做呢？

浏览量209

WhatUpDanger

ts报错，原始svg上没t怎么?

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/ea7ef821010fbb4459558765bd15525f.png) 大哥们，这个ts报错，原始svg上没t这么解决其他地方搜不到相关结果

浏览量190

我是张工你呢

jQuery动态更新SVG后，点击事件为何失效？

$('.class1 .class2 .path1').on("click", function() { alert('12345'); }); 此时点击svg区域会有弹窗显示12345，然后我使用jquery动态更新svg内容： $('#svg-1').html(''); 然后我再点击svg区域却显示没有任何弹窗。请教为何动态生成的svg内容无法响应点击事件呢？感谢。我通过console控制台执行如下代码后，再点击svg区域却可以显示12345弹窗: $('.class1 .class2 .path1').on("click", function() { alert('12345'); }); 使用 $('#svg-1').on("click", '.class1 .class2 .path1', function() { alert('12345'); }); 仍然没有弹窗显示！

浏览量193

喝一杯吧可以吗

svg多个单词调整完scale属性后位置变化了怎么样让其竖着紧凑排列？

我想问一下大佬这段svg里面包含了三个被调整过高度的单词但是调整后各自的位置都变了，如图"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/5682f961dd577768076d323b5a0cf8f1.png) scale这个属性有什么规律吗怎么能让每个单词再改变高度后依然在y轴一个个紧挨着因为没办法一个一个调整translate属性因为我有很多这样不同高度的单词需要循环所以需要找到其中的规律 Hello1 Hello2 Hello3 这是我手动调整后想要的效果"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/c5b81cb9aaf9c29f397ef164e5c0a0a9.png)

浏览量173

0offer糕手

如何在SVG中实现点击不同Tab时高亮对应线条？

想实现这样一个需求，点击不同的tab时，高亮对应的线，目前使用svg写的，但是三角形的颜色没办法跟随线去控制。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/1b95984e4625de3b75950e2454325a32.png) 尝试了使用currentColor，但是并没有达到期望值。 demo是使用hover代替点击事件，原以为marker-end之后，三角会属于当前路径的子集，所以想着给三角一个"currentColor",但是实际尝试下来发现无法达到预期。于是代码由一个三角形改成了三个，目前只能通过单独去修改对应的路径才能实现需求。期望可以使用一个三角形，鼠标经过不同线时，高亮对应线条及其尾部三角形。 "代码段" (https://codepen.io/jerryMiwang/pen/wvbKOOa)

浏览量168

谁能阻止我删代码

svg的path绘制整个圆弧，或者大圆弧(超过180度)，必须用两个a命令吗？

如下所示绘制整圆弧的方法，能否只用一个a命令绘制一个整圆弧，或者大于180度的圆弧？

浏览量170

我爱了你呢

如何使用Java将SVG转换为JPG并保留花括号？

使用java将svg转换为jpg 现在的问题是除符号外是基本可以实现的但是括号始终是无法转换成功https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240921/61675e2aa7eb3d5d7132facc2300c3b8.png这是svg的原图我转换之后https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240921/6c3406fbeef9655a41a2c4393130a667.png求解

浏览量157

加班使我熟睡

如何用 SVG 或 Canvas 实现三阶贝塞尔曲线编辑器并处理坐标轴变更和曲线拉长效果？

用 svg 或者 canvas 怎么制作三阶贝塞尔曲线的编辑器，其中有一个交互好难啊。"Kapture 2024-06-26 at 11.40.50.gif" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/8df50b5c2700ca8d0b780c6128b26367.png) 绘制曲线和拖拽都做完了，现在就是搞不明白坐标轴的变更，曲线被拉长的效果如何实现体验地址："https://huoxing.alipay.com/studio/?name=%E6%9C%AA%E5%91%BD%E5..." (https://link.segmentfault.com/?enc=e8YQYjcgDILqRAceEh%2Fp3w%3D%3D.ytWtPqAiioPBSI2YZ0Wz%2BY%2F0ILMYkfGlVw4Gu0RDbMZgPVh4cDReRqS9vXpq3H2atOhIfvQS8bLlisgbrR3P08Dsqna7OW1lejt6E9t%2BbUY%3D) 在底部的时间轴可以打开曲线编辑器

浏览量152

强哥喝假酒

svg作为css的background,导致fill不支持十六进制?

下面的代码中,我把svg作为css的background,发现fill属性如果写blue之类的单词,会显示正确的颜色,但换成十六进制,如#acd123,就无效. 但是如果把相同的svg写在body里面,即作为html标签使用,fill里写十六进制的颜色,能正确显示相应颜色. 所以问题来了,把svg作为css背景的情况下,svg下的rect的fill如何才能支持十六进制颜色的写法? .svg{ box-sizing: border-box; width: 100px; height: 100px; background: url("data:image/svg+xml,"); } svg的fill颜色 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/8362b2728bbb892ef360a20d8e90bae8.png)

浏览量121

编程界菜niao

这种css复杂（类似流程图）的UI的效果该如何实现？

https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241216/ad2b3f36a2e2f868de188859952c56a5.png 简单说明如下： 1、整个图由“主节点”串联起来，“主节点”可以（多个）并列（如：节点5 和节点6），串联使用如图中的箭头； 2、每一个“主节点”是一个“特殊”的“树形结构”，如“主节点2”，可以通过“展开、收起”按钮隐藏“主节点”的所有子节点； 3、主节点的子节点有鼠标移上去蓝色按钮交互（鼠标移上去，显示内容，可能有多个，需要用箭头像主节点5、6一样串联起来）。背景：考虑到其中有些部分比较"具有设计感"，大概率市面上没有安全一样的东西，所以想着自己手动实现，但是考虑了一下，发现有些地方仍不知道怎么处理，所以来请教下大家的意见，思路：从上到下，从左到右（奇数行相反），通过div写死布局，一行四个主节点（并列的算一个，上下布局，高度自动撑开）；难点： 1、“主节点”串联的连接线怎么实现，“并列主节点（节点5、6）”怎么连接，跨行时（大弯角），“主节点4”和“主节点5、主节点6”怎么连接； 2、特殊的树形图怎么实现，一般的都可以通过“ul”标签嵌套的方式实现，但是图中这种有点特殊，因为二级节点（2-1、2-2）都是覆盖在竖线上面的；然后就是树形图上的连接线如何实现； 3、树形图子节点上还有交互，有个“蓝色”小图标盖在连线点上面；

浏览量23