如何重用<defs>标签中定义的不同维度的<marker>？
<defs>标签是SVG（可缩放矢量图形）中的一个元素，用于定义可重用的图形元素。而<marker>标签则用于定义SVG路径或线段的端点样式。
要重用<defs>标签中定义的不同维度的<marker>，可以通过在<marker>标签中使用id属性来定义不同的标识符，然后在需要使用的路径或线段中通过使用marker-start、marker-mid和marker-end属性来引用这些标识符。
具体步骤如下：
- 在<defs>标签中定义不同维度的<marker>，并为每个<marker>标签设置一个唯一的id属性，例如：
- 在<defs>标签中定义不同维度的<marker>，并为每个<marker>标签设置一个唯一的id属性，例如：
- 在需要使用<marker>的路径或线段中，使用marker-start、marker-mid和marker-end属性来引用对应的<marker>标识符，例如：
- 在需要使用<marker>的路径或线段中，使用marker-start、marker-mid和marker-end属性来引用对应的<marker>标识符，例如：
这样就可以根据需要在不同的路径或线段中重用<defs>标签中定义的不同维度的<marker>。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云SVG图形处理：https://cloud.tencent.com/product/svg
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云音视频处理（云直播、云点播、实时音视频等）：https://cloud.tencent.com/product/vod
- 腾讯云网络安全（DDoS防护、Web应用防火墙等）：https://cloud.tencent.com/product/ddos
相关·内容
假设我在标签中定义了一个in标签，如下所示： <svg> <marker markerUnits="userSpaceOnUse" markerWidth="16</marker></svg> 请注意，已经应用了markerUnits、markerWidth和mar
浏览 27提问于2021-04-07得票数 2
回答已采纳
我正在使用SVG构建一个图标解决方案，其中的部分图标需要可重用。在我的HTML中有几个不同的<svg />元素，<use />元素非常适合重用形状- rects、路径等等，甚至在svg元素之间也是如此。但是，重用其他定义，比如<radialGradient />，对我来说是行不通的。当梯度定义在同一个<defs /&g
浏览 4提问于2016-03-04得票数 2
回答已采纳
2回答
我想用svg写一个徽标，但令人惊讶的是，我发现不能重用<defs>...</defs>中定义的对象。我在Chrome上试过。
测试1.html不工作，没有绘制rect。
浏览 5提问于2012-07-21得票数 1
回答已采纳
line元素包含在SVG中的组容器中。我使用以下代码将箭头头定义添加到SVG中。var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); "http://www.w3.or
浏览 4提问于2022-06-03得票数 0
回答已采纳
1回答
我想做一个定义，它采用StartArrow定义，并将其旋转180度。 line {stroke:black; stroke-width:2} </style>
<defstext x="5" y=&q
浏览 1提问于2018-07-04得票数 0
1回答
我在我的应用程序中得到了一些图形(使用d3.js库)，我想添加特殊的标记，看起来像圆，里面有一个箭头(简而言之:带圆形和彩色背景的箭头)。我读到我真的不能在我的圆标签之间做路径，那么我该如何处理这个问题呢？<defs>
<marker id="circle1" markerWidth="8" markerHeight="8" refX="5
浏览 1提问于2016-12-12得票数 0
我想在不使用javascript的情况下重用<animate>标签。如下所示： <defs> attributeName="width" dur="5s"
repeatCo
浏览 1提问于2013-09-15得票数 6
1回答
我有一堆SVG代表了一次使用polyline的旅行。
我使用非缩放-笔画矢量效应，以确保每条折线都以绝对宽度呈现。因此，当viewBox的维度发生变化时，polyline的宽度就不会改变。在上面提到的分界线的末端，我想放一些标记。我想要的标志也绝对大小。我认为，通过将标记单元设置为strokeWidth，这应该很容易。与折线的笔画不同，在折线末端的标记的大小会随着viewBox的大
浏览 3提问于2017-05-16得票数 0
回答已采纳
2回答
我发现maker端是受支持的，参见：。它被称为markerEnd而不是marker-end。它期待一个'url(#markerArrow)'，但它似乎不起作用。如何用svg制作箭头并做出反应？下面是我在组件子类呈现函数中的方法:它画线，而不是箭头头。<svg className='Line' style={{ height:height, width:width, top:top, left:left }}>
<<e
浏览 14提问于2016-02-24得票数 3
回答已采纳
我想在我的<defs>中定义一个<defs>标记，以便在页面中的多个<circle>上使用它。问题是：
如果我将动画标记中的xlink:href设置为针对我的一个圆圈，然后将目标放在我的动画中:圆圈是动画的；但是我不能在其他圆上重用我的动画。我不能从xlink:href标记中删除<a
浏览 0提问于2019-07-11得票数 0
>和<use>元素时，我将<g></g>重复了三次以获得三个这样的框，这些元素允许使用id引用重用元素，而不是重复它们的定义。> id="Arrow1Mend" refX=":none;"
d="M
浏览 0提问于2009-09-14得票数 22
回答已采纳
1回答
我试图实现一个突出显示功能，使箭头更大，并改变它的颜色。但问题是，当宽度变化时，两个末端标记之一(箭头)变得更大，但在较小的标记上也不重叠。我如何使它重叠，使它们看起来像一个更大的箭头而不是两个箭头
带有突出显示的我的代码 const [start, target]
浏览 0提问于2020-03-08得票数 4
回答已采纳
1回答
: url(#arrowhead); ]]> <defs> } </style> <marker，该元素在SVG元素
浏览 16提问于2019-01-24得票数 0
回答已采纳
我在一个带有css-loader的项目中使用WebPack。此项目中的SVG元素具有标记定义，这些标记在样式表中按如下方式分配：<defs> <circle cx="6"cy="6" r="5"></circle>
&l
浏览 0提问于2014-12-02得票数 0
2回答
我创建了一个标记，以显示在line元素的末尾。但是我的问题是，当标记标记是动态生成的时，它不会显示在行尾。
我所做的就是首先将svg添加到html主体中。$('svg').append('<defs><marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"markerWidth=&qu
浏览 1提问于2013-09-05得票数 1
回答已采纳
考虑下面的片段，它包含两个版本的SVG，其中有一个由<marker>定义的箭头。行和路径是用vector-effect: non-scaling-stroke设计的。JSFiddle：
<svg width="
浏览 2提问于2020-07-21得票数 1
回答已采纳
DOCTYPE html> width="490" height="385"<defs> <path d="M0,2 L6,0 L6,4 z" fill="#000" />
</
浏览 23提问于2016-09-15得票数 0
回答已采纳
6回答
我有一个窗口的选项卡控件和页数-标签项。每个选项卡项具有相同的网格布局-6行和4列。现在，每个选项卡项都包含具有行和列定义的网格，因此几乎一半的XAML是网格的定义。我如何在一个地方定义这个网格并在我的应用程序中重用这个定义？模板？用户控制？编辑：
浏览 5提问于2010-05-21得票数 24
1回答
我试图使标记为一堆SVG图像的统一。我的问题是，在标记定义中不能使外部引用工作。它可能与问题连接，但仍然缺少一个链接。:href="#b" /> </defs>a.svg (试图引用b.svg)：
浏览 0提问于2012-02-10得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
