如何在wheelnav.js中缩放SVG的图标大小？
wheelnav.js 是一个用于创建圆形导航菜单的 JavaScript 库。要在 wheelnav.js 中缩放 SVG 图标的大小，可以通过修改 SVG 元素的 width 和 height 属性来实现。以下是一个示例代码，展示了如何调整 SVG 图标的大小：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheelnav.js SVG Icon Scaling</title>
<script src="wheelnav.min.js"></script>
<style>
#myWheelnav {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="myWheelnav">
<div data-icon="icon1.svg" data-title="Home"></div>
<div data-icon="icon2.svg" data-title="About"></div>
<div data-icon="icon3.svg" data-title="Services"></div>
<div data-icon="icon4.svg" data-title="Contact"></div>
</div>
<script>
var myWheelnav = new WheelNav({
navItems: [
{ title: 'Home', icon: 'icon1.svg' },
{ title: 'About', icon: 'icon2.svg' },
{ title: 'Services', icon: 'icon3.svg' },
{ title: 'Contact', icon: 'icon4.svg' }
],
responsive: true,
animate: true,
duration: 500,
angle: 90,
autoClose: true
});
myWheelnav.create();
// 缩放 SVG 图标
var icons = document.querySelectorAll('#myWheelnav div');
icons.forEach(function(icon) {
var svg = icon.querySelector('svg');
if (svg) {
svg.setAttribute('width', '50'); // 设置宽度
svg.setAttribute('height', '50'); // 设置高度
}
});
</script>
</body>
</html>在这个示例中，我们首先创建了一个 wheelnav.js 导航菜单，并在每个导航项中使用了 SVG 图标。然后，我们通过 JavaScript 代码获取所有的导航项，并遍历这些导航项以找到其中的 SVG 元素。一旦找到 SVG 元素，我们就使用 setAttribute 方法来设置其 width 和 height 属性，从而实现缩放效果。
请确保你的 SVG 图标文件路径正确，并且在实际项目中根据需要调整 width 和 height 的值。
参考链接：
如果你遇到任何问题或需要进一步的帮助，请随时提问。
相关·内容
有没有可能缩放图标的大小使用在每个轮子分段基于断点(即。1024及以上)？} 我已经很好地满足了我的需求，这是最后一个障碍:) ? 更新了基于答案的解决方案(决定将图标缩小为较低的分辨率以保持逼真度)： if(window.innerWidth < 1024){
wheel.sliceTransformFunction
浏览 43提问于2019-03-24得票数 0
回答已采纳
7回答
与字体图标相比，SVG图标有一些优势:它们可以缩放以适应可变大小的容器元素，并且理论上可以更改单个路径的颜色。我还喜欢我可以很容易地在Inkscape中制作它们的事实:P
但是，如何在CSS文件中移动SVG，以便它们可以像图标字体一样在同一个页面上重用，并仍然受益于这些优点呢？background属性支持SVG，但这意味着我必须将SVG放入bac
浏览 3提问于2015-01-15得票数 6
我需要使用JavaFX-应用程序中的一些元素，这些元素使用
横幅或背景图像。这个应用程序应该运行在具有不同屏幕分辨率的多个设备上，我(最终)还需要缩放图像/图标(迫使它们与一定的大小/比例匹配)。那么，如何在质量损失最小的情况下做到这一点呢？我知道，不可能将SVG-图形加载到图像视图中，所以我可能不得不使用png/jpg。我
浏览 0提问于2019-08-16得票数 1
回答已采纳
因为wheelnav.js libray允许程序员将菜单项定义为文本或图像。永远不要同时为一个菜单元素，我需要图标+文本，我想出编码图标作为一个unicode实体，这并不困难，因为我使用字体Awesome。不幸的是，我从wheelnav.js源代码中了解到，在创建SVG文本节点(以及它的tspan子节点)时，底层的raphael.js会转义特殊的字符和更改& to &&从而导致实体被逐字显示，而不是相应
浏览 2提问于2018-12-05得票数 1
回答已采纳
2回答
我正在制作一个angular js应用程序，我使用的是在我的项目中创建大图标时遇到问题的图标。我现在是这样分配图标的。app.config(function($mdIconProvider) { .defaultIconSet('assets/icon/materialdesignicons.svg')
.iconSet(['large'], 'asse
浏览 2提问于2016-01-14得票数 3
我知道有很多图标主题包，但实际上，我认为Ubuntu应该能够为系统中的任何设置提供矢量化图标。因此，请不要为这项任务的第三方包。我真的很想要矢量化的图像。在Settings中外观>启动器图标大小小于30。等28及24我不能用更大的图标来再现效果。您可以选择“设置”>“外观”>
浏览 0提问于2016-05-30得票数 1
2回答
我创建了一个包含以下内容的桌面文件：Name=Mozilla Firefox - devComment=Web ApplicationExec=/usr/lib/firefox/firefox -P dev -no-remote这是很好的，它启动火狐在正确的配置文件，如预期。然而，图标是单一<
浏览 6提问于2014-08-26得票数 0
回答已采纳
如何使用2+普通CSS、HTML或JS更改角材质设计中SVG图标的大小？important">home</mat-icon><mat-icon style="font-size: 16pximportant" svgIcon="home"></mat-icon>
我知道<
浏览 0提问于2018-02-13得票数 12
回答已采纳
我在我的Flex应用程序中嵌入SVG图形{ { [Bindable] }然后用自己的代码扩展Tree类，在向数据提供程序添加节点时设置图标this.dataProvider.a
浏览 6提问于2009-01-14得票数 0
5回答
IE9/10/11有一个已知的问题，如果您有一个SVG文件，其中的<svg>元素指定了宽度和高度，然后您使用<img>标记的width和height属性缩放了SVG图像，IE无法正确缩放图像。我有一系列的SVG旗帜图标。：但在IE10上，它呈现如下：所以，这里似乎发生的事情是，即使IE10将<img>元
浏览 112提问于2015-01-16得票数 59
回答已采纳
1回答
我的一些SVG图标在缩放监视器(Win10)或使用highDPI监视器(Win10、Linux、Mac)时没有正确缩放。这适用于分配给QAction并由QMenu条目或QToolButtons显示的图标，以及分配给QDockWidgets的图标，如所附屏幕截图的上部所示。下面部分的图标在派生的paintEvent(.)中绘制。完
浏览 0提问于2019-02-07得票数 2
回答已采纳
是否可以使用svg编辑更改现有svg的大小？我，我有一个相当大的svg，我想缩小。Google的工具没有一个图标(我可以看到)来缩放大小
浏览 11提问于2015-02-28得票数 0
回答已采纳
1回答
我正在使用FabricJS创建一个包含两个对象的组--灯光图标(svg)和阴影(三角形)。轻型图标SVG，我作为SVG导入，然后设置标度如下：lightObj.scaleToHeight(24);
然后，我是分组光图标svg对象和阴影三角形对象接下来，我试图调整组的大小，以便调整阴影对象的大小。当我调整组的<
浏览 5提问于2021-09-26得票数 0
2回答
我想在我的PyQt5应用程序中使用高分辨率图标。但是，下面的代码片段在我的HiDPI macOS平台上生成了一个非常低分辨率的呈现效果(所需的图标可以从here下载)： import sys
main = QMainWindow()
icon = QIcon("waves-24px.<em
浏览 88提问于2019-10-17得票数 0
回答已采纳
3回答
屏幕图标没有完全显示
、、、
我使用新的闪屏api向所有android版本添加一个均匀的启动屏幕，直到API级别23。对飞溅图标有什么要求吗？目前，我尝试使用svg，我认为它会在不同的屏幕上自动调整大小。是否有人经历过这种情况，并有解决办法，或者知道(隐藏的)这些？要求？我使用最新的闪屏api版本(1.0.0-alpha02 02)，这就是我的主题：
<style name="SplashTheme" parent="T
浏览 12提问于2021-12-01得票数 14
回答已采纳
3回答
我有个有趣的问题。在Android中，预览就像这样：但是，当我在手机中运行项目时，视图就像这样(Android4.4.2)：当我在Android6.0手机上运行这个项目时，视图与Android6.0的预览相同。svg文件的大小是正常的。因此，我不知道为什么当“层列表”有两个项时，svg文件的siez会变得更大。我想知道。有解决办法吗？
浏览 9提问于2016-08-20得票数 4
如何在应用程序中设置图标大小，使其在用户使用屏幕缩放时仍然可以缩放？
在我的应用程序中，我的QToolBar在MainWindow中似乎使用了24x24的图标大小。我有一些QToolButton，默认情况下它的图标大小为20x20，因此我必须手动将其设置为24x24，以便在setIconSize(QSize(2
浏览 1提问于2020-02-17得票数 2
回答已采纳
2回答
我正在尝试使用包含图像的模式填充SVG形状。SVG被设置为缩放以填充它们的容器，但我想停止模式缩放，以便纹理/分辨率对所有大小保持不变。SVG代码直接写入HTML</html>正如您将看到的，背景图像随图标缩放。我可以禁用这个缩放效果，在所
浏览 0提问于2013-12-03得票数 0
1回答
我想增加在PySide/Qt表格单元格内显示的SVG图标的大小 entry = QtGui.QTableWidgetItemQtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)我绝对没有尝试增加所显示的SVG的<
浏览 5提问于2014-07-15得票数 0
="linkedin.svg" alt="LinkedIn"> </div>CSSflex-wrap: wrap;
width: 2em; }我无法使用CSS width属性调整SVGs的
浏览 6提问于2016-08-20得票数 136
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
