SVG 颜色 – SVG Color – 如何使用填充颜色和描边颜色？

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

潇洒的机器猫 · Konbini支付方式-Konbini便利店 ...· 1 月前 ·

风度翩翩的消防车 · MTG Arena Redeem code ...· 2 月前 ·

幸福的领结 · AR/VR Headset Market ...· 2 月前 ·

逃跑的棒棒糖 · 【宝马3系】华晨宝马3系汽车_宝马3系怎么样 ...· 2 月前 ·

宽容的大白菜 · 马恩岛机场(IOM) | 环亚机场贵宾室| ...· 3 月前 ·

</noscript><div class="header"><div><a rel="nofollow" href="https://www.aspose.com" alt="Aspose Pty Ltd Logo" aria-label="Aspose Pty Ltd Logo" class="logo"/><div class="bar"><ul class="menu"><li class="products desktop-only"><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com">Products</a><ul class="submenu grid-4"><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/total/">Aspose.TotalProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/words/">Aspose.WordsProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/pdf/">Aspose.PDFProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/cells/">Aspose.CellsProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/email/">Aspose.EmailProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/slides/">Aspose.SlidesProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/imaging/">Aspose.ImagingProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/barcode/">Aspose.BarCodeProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/diagram/">Aspose.DiagramProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/tasks/">Aspose.TasksProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/ocr/">Aspose.OCRProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/note/">Aspose.NoteProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/cad/">Aspose.CADProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/3d/">Aspose.3DProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/html/">Aspose.HTMLProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/gis/">Aspose.GISProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/zip/">Aspose.ZIPProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/page/">Aspose.PageProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/psd/">Aspose.PSDProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/omr/">Aspose.OMRProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/svg/">Aspose.SVGProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/finance/">Aspose.FinanceProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/font/">Aspose.FontProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/tex/">Aspose.TeXProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/pub/">Aspose.PUBProduct Solution</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://products.aspose.com/drawing/">Aspose.DrawingProduct Solution</a></li></ul></li><li class="desktop-only"><a class="menu-item" rel="noopener nofollow" href="#">Purchase</a><ul class="submenu"><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/buy">Buy Now</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/pricing">Pricing Information</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://releases.aspose.com/">Free Trials</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/temporary-license/">Temporary License</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/policies/">Policies</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/orders">My Orders &amp; Quotes</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/renew">Renew an Order</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://purchase.aspose.com/upgrade">Upgrade an Order</a></li></ul></li><li class="desktop-only"><a class="menu-item" rel="noopener nofollow" href="#">Support</a><ul class="submenu"><li><a class="menu-item" rel="noopener nofollow" href="https://docs.aspose.com/">Docs</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://reference.aspose.com/">API Reference</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://demos.aspose.com/">Live Demos</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://aspose.github.io/">Code Samples</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://forum.aspose.com/">Free Support</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://aspose-free-consulting.github.io/">Free Consulting</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://helpdesk.aspose.com/">Paid Support</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://consulting.aspose.com/">Paid Consulting</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://blog.aspose.com/">Blog</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://kb.aspose.com/">Knowledge Base</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://releases.aspose.com/">New Releases</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://status.aspose.com/">Status</a></li></ul></li><li class="desktop-only"><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/">Websites</a><ul class="submenu"><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/aspose/com/">aspose.com</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/aspose/cloud/">aspose.cloud</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/aspose/app/">aspose.app</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/groupdocs/com/">groupdocs.com</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/groupdocs/cloud/">groupdocs.cloud</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/groupdocs/app/">groupdocs.app</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/conholdate/com/">conholdate.com</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/conholdate/cloud/">conholdate.cloud</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/conholdate/app/">conholdate.app</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/containerize/com/">containerize.com</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/codeporting/com/">codeporting.com</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://websites.aspose.app/fileformat/com/">fileformat.com</a></li></ul></li><li class="desktop-only"><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app">About</a><ul class="submenu"><li><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app">About Us</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app/contact/">Contact</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app/legal/">Legal</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app/affiliates/">Affiliates</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app/events/">Events</a></li><li><a class="menu-item" rel="noopener nofollow" href="https://about.aspose.app/acquisition/">Acquisition</a></li></ul></li><li class="language"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentcolor"><path d="M12 4c4.4183.0 8 3.58172 8 8 0 4.4183-3.5817 8-8 8-4.41828.0-8-3.5817-8-8 0-4.41828 3.58172-8 8-8zm-.381 11.428L8.57155 15.4289C8.9774 16.7012 9.60471 17.924 10.4358 19.0678 10.8198 19.1532 11.2151 19.2073 11.6191 19.2282L11.619 15.428zM15.4284 15.4289 12.38 15.428 12.3809 19.2282C12.7849 19.2073 13.1802 19.1532 13.5641 19.0687 14.3953 17.924 15.0226 16.7012 15.4284 15.4289zM18.3762 15.4285 16.0984 15.4284C15.7811 16.5746 15.31 17.6754 14.703 18.7169c1.5738-.634 2.8744-1.806 3.6732-3.2884zM7.90159 15.4284 5.62381 15.4285c.79877 1.4824 2.09943 2.6544 3.67446 3.2885-.60825-1.0416-1.07936-2.1424-1.39668-3.2886zM7.4355 12.3803 4.77175 12.3809C4.81342 13.1846 4.98617 13.9535 5.26904 14.6669L7.71488 14.6666c-.15933-.7461-.25402-1.5094-.27938-2.2863zM15.9653 12.3808 12.38 12.38v2.286L15.6434 14.6671c.1843-.7493.2928-1.5134.321899999999999-2.2863zM19.2282 12.3809 16.5645 12.3803C16.5391 13.1572 16.4444 13.9205 16.2851 14.6666L18.731 14.6669C19.0138 13.9535 19.1866 13.1846 19.2282 12.3809zM11.619 12.38 8.03469 12.3808C8.06384 13.1537 8.17229 13.9178 8.35656 14.6671L11.619 14.666V12.38zM7.78068 8.95226 5.43294 8.95224C5.05284 9.76985 4.82095 10.6703 4.77175 11.6191L7.4329 11.6194C7.45634 10.71 7.57476 9.81899 7.78068 8.95226zM15.5678 8.95239 12.38 8.952v2.667h3.588L15.9673 11.5875C15.9382 10.6945 15.8033 9.81313 15.5678 8.95239zM18.5671 8.95224 16.2193 8.95226C16.4252 9.81899 16.5437 10.71 16.5671 11.6194L19.2282 11.6191C19.1791 10.6703 18.9472 9.76985 18.5671 8.95224zM11.619 8.952 8.43217 8.95239C8.16446 9.93108 8.02667 10.9364 8.02667 11.9553L8.031 11.619h3.588V8.952zM9.22964 5.31048 9.02453 5.39982c-1.31708.59469-2.4243 1.57203-3.17995 2.79029L7.98594 8.19044C8.28727 7.19147 8.70587 6.2283 9.22964 5.31048zm3.15126-.53873L12.38 8.19 15.3312 8.18991c-.3925-1.12859-.9602-2.21592-1.6906-3.24091C13.2322 4.85405 12.8116 4.79408 12.3809 4.77175zm2.3884.53883L14.9321 5.60148C15.3809 6.43124 15.7444 7.2965 16.0141 8.19044L18.1554 8.19011C17.3607 6.9088 16.177 5.89399 14.7693 5.31058zm-4.1992-.40747L10.3594 4.949C9.629 5.97399 9.06128 7.06132 8.66884 8.18991L11.619 8.19 11.6191 4.77175C11.262 4.79027 10.9117 4.83467 10.5701 4.90311z"/></svg>简体中文<ul class="submenu grid-3"><li><a href="https://docs.aspose.com/svg/net/drawing-basics/svg-color/" class="menu-item">English</a></li><li><a href="https://docs.aspose.com/svg/fr/net/drawing-basics/svg-color/" class="menu-item">Français</a></li><li><a href="https://docs.aspose.com/svg/de/net/drawing-basics/svg-color/" class="menu-item">Deutsch</a></li><li><a href="https://docs.aspose.com/svg/ru/net/drawing-basics/svg-color/" class="menu-item">Русский</a></li></ul></li></ul></div></div></div><div class="main_block"><div class="leftbar"><div class="collapse_leftbar_btn"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8.0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3.0s-12.5-32.8.0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8.0-45.3s32.8-12.5 45.3.0l192 192z"/></svg></div><nav><div class="td-sidebar__search d-flex align-items-center"><input type="text" id="internalSearch" class="search_input" placeholder="Search " aria-label="" autocomplete="off" data-index="docs.aspose.com"/> <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fa fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation"/></div><ul><li class="active open"><a href="/svg/zh/net/">Aspose.SVG for .NET</a></li><li class="no-indent"><ul><li><a href="/svg/zh/net/what-is-an-svg-document/">什么是 SVG 文件？</a></li><li class="closeli"><a href="/svg/zh/net/getting-started/">入门</a></li><li><a href="/svg/zh/net/drawing-skia-sharp/">Aspose.SVG.Drawing.SkiaSharp</a></li><li class="active open"><a href="/svg/zh/net/drawing-basics/">SVG 绘图基础知识</a></li><li class="no-indent"><ul><li><a href="/svg/zh/net/drawing-basics/coordinate-systems-and-units/">SVG 坐标系和单位</a></li><li><a href="/svg/zh/net/drawing-basics/svg-shapes/">SVG 形状</a></li><li><a href="/svg/zh/net/drawing-basics/svg-path-data/">SVG 路径数据</a></li><li><a href="/svg/zh/net/drawing-basics/svg-text/">SVG 文本</a></li><li><a href="/svg/zh/net/drawing-basics/svg-transformations/">基本 SVG 转换</a></li><li><a href="/svg/zh/net/drawing-basics/transformation-matrix/">SVG 变换矩阵</a></li><li><a href="/svg/zh/net/drawing-basics/fills-and-strokes/">SVG 中的填充和描边</a></li><li class="active"><a href="/svg/zh/net/drawing-basics/svg-color/">SVG颜色</a></li><li class="no-indent"><ul/></li><li><a href="/svg/zh/net/drawing-basics/embedded-content/">SVG 嵌入内容</a></li><li><a href="/svg/zh/net/drawing-basics/filters-and-gradients/">SVG 滤镜和渐变</a></li></ul></li><li class="closeli"><a href="/svg/zh/net/how-to-work-with-aspose-svg-api/">如何使用 Aspose.SVG API</a></li><li><a href="/svg/zh/net/how-to-run-the-tests/">如何运行示例</a></li><li><a href="/svg/zh/net/faq/">常问问题</a></li></ul></li></ul></nav></div><div class="docs_information"><div class="breadcrumb_block"><ul><li><a href="/" aria-label="Go to home page"></a></li><li><a href="/svg/zh/">Aspose.SVG</a></li><li><a href="/svg/zh/net/">.NET</a></li><li><a href="/svg/zh/net/drawing-basics/">SVG 绘图基础知识</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/">SVG颜色</a></li></ul></div><h1>SVG 颜色 – SVG Color – 如何使用填充颜色和描边颜色？</h1><div data-nosnippet="" id="toc-right-side-bar" class="anchors_block"><div class="anchors_block_top"><div>Contents</div>[ ]</div><div class="section_nav_list" id="collapseToC"><nav id="TableOfContents"><ul><li><a href="/svg/zh/net/drawing-basics/svg-color/#svg-颜色指定">SVG 颜色指定</a><ul><li><a href="/svg/zh/net/drawing-basics/svg-color/#样式属性的填充和描边属性">样式属性的填充和描边属性</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#填充和描边属性">填充和描边属性</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#svg-颜色代码--svg-color-codes">SVG 颜色代码 – SVG Color Codes</a></li></ul></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#在线颜色转换器">在线颜色转换器</a><ul><li><a href="/svg/zh/net/drawing-basics/svg-color/#颜色指定规则">颜色指定规则</a></li></ul></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#颜色-形状--color-shapes">颜色形状 – Color Shapes</a><ul><li><a href="/svg/zh/net/drawing-basics/svg-color/#圆圈颜色--circle-color">圆圈颜色 – Circle Color</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#颜色线和颜色折线--color-line-and-color-polyline">颜色线和颜色折线 – Color Line and Color Polyline</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#彩色折线和彩色多边形--color-polyline-and-color-polygon">彩色折线和彩色多边形 – Color Polyline and Color Polygon</a></li></ul></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#路径颜色--path-color">路径颜色 – Path Color</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#文字颜色--text-color">文字颜色 – Text Color</a></li><li><a href="/svg/zh/net/drawing-basics/svg-color/#不透明度--opacity">不透明度 – Opacity</a></li></ul></nav></div></div>可扩展矢量图形 (SVG) 是一种用于创建 2D 矢量和混合矢量/光栅图形的 XML 语言。使用矢量图形是近年来最流行的网页设计趋势之一。 SVG 允许开发人员和设计人员创建使用点、线、路径和形状构建的矢量图像。它最适合创建徽标、图标、简单图形和动画。 SVG 图像与分辨率无关，可以使用任何文本编辑器创建和编辑。使用颜色是创建 SVG 的重要组成部分。您可以为 SVG 形状、线条、路径、文本着色。 SVG 图形可以是彩色的、纹理的、阴影的，或者由部分透明的重叠层构建。本文深入研究了 SVG 文本和形状的不同着色方式。您将了解如何定义颜色的概述，包括控制 SVG 内容透明度的各种方法。<h2 id="svg-颜色指定">SVG 颜色指定</h2>着色或绘画是指使用fill和stroke向SVG图形添加颜色、渐变或图案的操作。填充和描边都是绘画操作。 SVG 描边和 SVG 填充是一些主要的 CSS 属性，可以为任何线条、文本和形状设置。在 SVG 文件中，它们可以在 style 属性(<code>fill</code> 和 <code>stroke</code> 属性)中指定，也可以使用 fill 和 stroke 属性作为 <a href="https://www.w3.org/TR/2018/CR-SVG2-20181004/styling.html#TermPresentationAttribute" target="_blank" rel="nofollow">presentation attributes</a> 。因此，您可以通过两种方式设置 SVG 元素的颜色：使用 style 属性的填充和描边属性以及使用 fill 和 stroke 属性。欲了解更多信息，请参阅 <a href="https://www.w3.org/TR/2018/CR-SVG2-20181004/painting.html#FillProperties" target="_blank" rel="nofollow">W3C page</a>。<h3 id="样式属性的填充和描边属性">样式属性的填充和描边属性</h3>SVG 填充和 SVG 描边功能可以在 style 属性中设置。指定属性的语法如下：<code>style="stroke-width:2; stroke:green; fill:#ff0000"</code><h3 id="填充和描边属性">填充和描边属性</h3>SVG 填充和 SVG 描边可以在 fill 和 stroke 属性中给出，语法如下：<code>stroke-width="2" stroke="green" fill="#ff0000"</code><h3 id="svg-颜色代码--svg-color-codes">SVG 颜色代码 – SVG Color Codes</h3>要指定 SVG 颜色，您可以采用颜色名称、RGB 或 RGBA 值、十六进制值、HSL 或 HSLA 值。以下示例将使用不同的方式来设置填充和描边特性，让我们考虑一下它们：<ol><li>SVG 颜色名称。可缩放矢量图形 (SVG) 规范定义了 <a href="https://www.w3.org/TR/SVG11/types.html#ColorKeywords" target="_blank" rel="nofollow">147 种颜色名称</a>。您可以设置命名颜色，如下所示：<code>stroke="Green"</code> 或 <code>fill="Red"</code>。</li><li>十六进制颜色代码。代码表示如下：#RRGGBB，其中每个两位数值是三种颜色(红、绿、蓝)中每种颜色的范围，您可以通过它选择代表每种颜色的最终值。每个两位数的十六进制对可以具有从 00 到 FF 的值。例如#00FF00显示为绿色，因为绿色分量设置为其最大值(FF)，其他设置为00。您可以设置绿色和红色的十六进制颜色，如下所示：<code>stroke="#00FF00"</code> 或 <code>fill="#FF0000"</code>。</li><li>RGB(Red, Green, Blue)颜色代码。值R、G和B分别是所确定的颜色的红色、绿色和蓝色分量的强度(范围从0到255)。您可以像这样设置绿色和红色 RGB 颜色：<code>stroke="rgb(0,255,0)"</code> 或 <code>fill="rgb(255,0,0)"</code>。</li><li>RGBA(Red, Green, Blue、Alpha)颜色代码。 RGBA 颜色值是 RGB 颜色值的扩展，具有确定颜色不透明度的 Alpha 通道。 alpha 参数是一个介于 0.0 和 1.0 之间的数字，用于指定透明度。您可以像这样确定绿色和红色 RGB 颜色：<code>stroke="rgba(0,255,0,1.0)"</code> 或 <code>fill="rgba(255,0,0,1.0)"</code>。</li><li>HSL 颜色代码。 HSL 代表色相、饱和度和亮度。每种颜色在 RGB 色轮上都有一个角度以及饱和度和亮度值的百分比值。绿色和红色的 HSL 代码您可以这样设置： <code>stroke="hsl(120, 100%, 50%)"</code> 和 <code>fill="hsl(0, 100%, 50%)"</code>。</li><li>HSLA(色相、饱和度、亮度、Alpha)颜色代码。 HSLA 颜色值是 HSL 颜色值的扩展，带有一个决定颜色不透明度的 Alpha 通道。绿色和红色的 HSL 代码您可以这样设置： <code>stroke="hsla(120, 100%, 50%, 1.0)"</code> 和 <code>fill="hsla(0, 100%, 50%, 1.0)"</code>。</li></ol><h2 id="在线颜色转换器">在线颜色转换器</h2>对于不同的任务，首选不同的颜色代码。因此，有时您可能需要转换颜色代码。在颜色区域内单击以选择颜色，或在输入文本框中输入颜色代码。您将立即在“输出”部分中看到所选颜色的其他颜色代码。使用我们免费的在线颜色转换器并立即获得结果！<div class="container" id="container.svg.c.52431768"><div class="row"><div class="col" id="svg.c.52431768"><pre class="hidden"> </pre></div></div></div><h3 id="颜色指定规则">颜色指定规则</h3>颜色指定的一些规则是：<ul><li>如果未指定 fill 属性(或 style 属性的 <code>fill</code> 属性)，则默认为黑色。</li><li>如果 fill 属性(或 style 属性的 <code>fill</code> 属性)具有 none 或 transparent 值，则形状填充是透明的。</li><li>如果未指定 stroke 属性(或 style 属性的 <code>stroke</code> 属性)，则笔划不可见，不存在。即使指定了 stroke-width 属性，这仍然是正确的。</li><li>要指定填充颜色或描边颜色，您可以使用颜色名称、RGB 或 RGBA 值、HEX 值、HSL 或 HSLA 值。此外，您还可以采用渐变和图案(请参阅 <a href="/svg/zh/net/drawing-basics/svg-color/#%e6%96%87%e5%ad%97%e9%a2%9c%e8%89%b2--text-color">文本颜色</a> 部分或 <a href="/svg/zh/net/drawing-basics/filters-and-gradients/">SVG 滤镜和渐变</a> 文章)。</li></ul><h2 id="颜色-形状--color-shapes">颜色形状 – Color Shapes</h2>填充是形状内部的颜色，描边是对象的可见轮廓。您可以用一种颜色填充形状并用另一种颜色描边。如果您创建 SVG 形状但未设置填充颜色，则该形状将为黑色。如果设置描边宽度属性但未设置描边颜色，则描边将不可见。注意：填充和描边可用于圆形、椭圆形、矩形、折线和多边形等 SVG 形状。对于 SVG 线条，仅允许描边。<div class="alert_block_primary">如何使用适用于 .NET 的 Aspose.SVG 库处理 SVG 颜色以及如何更改 SVG 元素的颜色或 SVG 文件中的背景颜色，我们在文章 <a href="/svg/zh/net/how-to-change-svg-color/">如何更改 SVG 颜色</a>。</div><h3 id="圆圈颜色--circle-color">圆圈颜色 – Circle Color</h3>在下面的示例中，我们考虑应用于 SVG 圆形的填充颜色和描边颜色。 注意：该代码片段可类似地用于 SVG 椭圆、矩形、折线和多边形。<div class="code_snipet_position"><button class="copy_code">Copy</button><div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">1&lt;svg height="200" width="600" xmlns="http://www.w3.org/2000/svg"&gt; 2 &lt;circle cx="70" cy="70" r="50" /&gt; 3 &lt;circle cx="200" cy="70" r="50" fill="#79C99E" /&gt; 4 &lt;circle cx="330" cy="70" r="50" fill="#79C99E" stroke-width="10" stroke="#508484" /&gt; 5 &lt;circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" /&gt; 6 &lt;circle cx="590" cy="70" r="50" fill="none" stroke-width="10" stroke="#508484" /&gt; 7&lt;/svg&gt;</code></pre></div></div>该图说明了上面的代码片段：<img src="/svg/images/drawing/color-circle.png" alt="文本“四个彩色圆圈”"/><h3 id="颜色线和颜色折线--color-line-and-color-polyline">颜色线和颜色折线 – Color Line and Color Polyline</h3>在下面的示例中，我们考虑应用于 SVG 线和 SVG 折线的填充和描边。 注意：代码片段使用 style 属性的 <code>fill</code> 和 <code>stroke</code> 属性设置颜色填充和颜色描边：<div class="code_snipet_position"><button class="copy_code">Copy</button><div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">1&lt;svg height="400" width="700" xmlns="http://www.w3.org/2000/svg"&gt; 2 &lt;line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" /&gt; 3 &lt;line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" /&gt; 4 &lt;line x1="80" y1="20" x2="250" y2="300" style="stroke:#77bec1; stroke-width:10" /&gt; 5 &lt;polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" /&gt; 6 &lt;polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" /&gt; 7 &lt;polyline points="300,300 360,250 420,300 480,250 540,300 600,250 660,300" style="stroke:#fb6796; stroke-width:5" /&gt; 8&lt;/svg&gt;</code></pre></div></div><img src="/svg/images/drawing/color-line.png" alt="文本“三条 SVG 线和三条 SVG 折线(未填充和填充)”"/><h3 id="彩色折线和彩色多边形--color-polyline-and-color-polygon">彩色折线和彩色多边形 – Color Polyline and Color Polygon</h3>以下示例说明了将填充颜色和描边颜色应用于 SVG 折线和 SVG 多边形的异同：<div class="code_snipet_position"><button class="copy_code">Copy</button><div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">1&lt;svg height="400" width="500" xmlns="http://www.w3.org/2000/svg"&gt; 2 &lt;polyline points="60,290 130,20 200,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" /&gt; 3 &lt;polygon points="260,290 330,20 400,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" /&gt; 4&lt;/svg&gt;</code></pre></div></div>由于折线是开放线，因此形状的该部分不会出现描边颜色。由于多边形是一条闭合线，因此描边颜色围绕形状的整个周边。<img src="/svg/images/drawing/color-shapes.png" alt="文本“带填充和描边的 SVG 折线和 SVG 多边形”"/><h2 id="路径颜色--path-color">路径颜色 – Path Color</h2>对于 SVG <code>&lt;path&gt;</code> 元素，您可以使用颜色描边和颜色填充。 fill 属性为图形元素的内部着色。当您填充 SVG 路径时，fill也会对开放路径着色，就好像最后一个点连接到第一个点一样，即使路径该部分中的 stroke 颜色不会出现。如果未指定 fill 属性值，则默认为黑色。为了不填充，需要指定属性值<code>fill=“none”</code> 或 <code>fill=“transparent”</code>。在下面的代码示例中，我们将展示如何将填充和描边与 <code>&lt;path&gt;</code> 元素一起使用：<div class="code_snipet_position"><button class="copy_code">Copy</button><div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java"> 1&lt;svg height="400" width="600" xmlns="http://www.w3.org/2000/svg"&gt; 2 &lt;path stroke="#a06e84" stroke-width="3" fill="none" d=" 3 M 150,50 L 150, 300 4 M 120,100 L 150,50 L 180, 100 5 M 110,150 L 150,90 L 190, 150 6 M 90,220 L 150,130 L 210, 220 7 M 70,300 L 150,190 L 230, 300 8 M 110,310 L 150,240 L 190, 310 9 " /&gt; 10 &lt;path stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" d=" 11 M 150,50 L 150, 300 12 M 120,100 L 150,50 L 180, 100 13 M 110,150 L 150,90 L 190, 150 14 M 90,220 L 150,130 L 210, 220 15 M 70,300 L 150,190 L 230, 300 16 M 110,310 L 150,240 L 190, 310 17 " /&gt; 18&lt;/svg&gt;</code></pre></div></div>下图说明了值 <code>fill = "none"</code> 和 <code>fill="#74aeaf"</code> 的显示方式：<img src="/svg/images/drawing/color-paths.png" alt="文本“两个 SVG 路径：未填充和已填充”"/><h2 id="文字颜色--text-color">文字颜色 – Text Color</h2>与其他 SVG 形状一样，文本可以同时设置描边和填充。在此代码示例中，我们将了解如何设置文本的填充颜色和描边颜色以及如何使用渐变作为填充。与所有 SVG 形状一样，如果未指定 fill 属性，则默认情况下文本将显示为黑色：<div class="code_snipet_position"><button class="copy_code">Copy</button><div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java"> 1&lt;svg height="300" width="600" xmlns="http://www.w3.org/2000/svg"&gt; 2 &lt;defs&gt; 3 &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"&gt; 4 &lt;stop offset="10%" style="stop-color:lightsalmon" /&gt; 5 &lt;stop offset="50%" style="stop-color:teal" /&gt; 6 &lt;stop offset="90%" style="stop-color:lightpink" /&gt; 7 &lt;/linearGradient&gt; 8 &lt;/defs&gt; 9 &lt;text x="50" y="50" font-family="arial" font-size="40" &gt;How to add SVG text color?&lt;/text&gt; 10 &lt;text x="50" y="130" font-family="arial" font-size="40" fill="lightpink" stroke="teal" stroke-width="1" &gt;How to add SVG text color?&lt;/text&gt; 11 &lt;text x="50" y="210" font-family="arial" font-size="40" fill="none" stroke="teal" stroke-width="1" &gt;How to add SVG text color?&lt;/text&gt; 12 &lt;text x="50" y="290" font-family="arial" font-size="40" fill="url(#grad1)" stroke="teal" stroke-width="1" &gt;How to add SVG text color?&lt;/text&gt; 13&lt;/svg&gt;</code></pre></div></div>该图显示了应用填充和描边来添加文本颜色的不同情况：<img src="/svg/images/drawing/color-text.png" alt="文本 “两个 SVG 路径：未填充和已填充”"/>您可以在文章 <a href="/svg/zh/net/drawing-basics/fills-and-strokes/">SVG 中的填充和描边</a> 和 <a href="/svg/zh/net/drawing-basics/filters-and-gradients/">SVG 滤镜和渐变</a> 中阅读有关如何设置文本样式的更多信息。<h2 id="不透明度--opacity">不透明度 – Opacity</h2>您可以在 SVG 中单独指定填充或描边的不透明度。这些由 fill-opacity 和 stroke-opacity 属性控制。此外，您还可以使用 SVG 中允许的 RGBA 或 HSLA 值，并且会产生相同的效果：<ul><li>RGBA 颜色值有一个 Alpha 通道，用于确定颜色的不透明度。 alpha 参数是一个介于 0.0(表示“完全透明”)和 1.0(表示“完全不透明”)之间的数字。例如，rgba(255, 0, 0, 0.5) 显示为红色，不透明度为 50%。</li><li>HSLA 颜色值由色调、饱和度、亮度和 Alpha 指定，其中 Alpha 参数指定不透明度。与 RGBA 颜色代码一样，alpha 参数介于 0.0 和 1.0 之间。例如，hsla(0, 100%, 50%, 1) 显示为纯红色，hsla(0, 100%, 50%, 0.5) 显示为不透明度为 50% 的红色。</li></ul>让我们看一个如何设置形状填充颜色的不透明度的示例。在下面的代码片段中，我们指定不同的不透明度值，使用 RGBA 颜色代码用 rgb(0,50,255) 蓝色填充矩形(图 a)；对于红色 hsl(0,100%,50%) – 使用 HSLA 颜色代码(图 b)，对于颜色 HEX #C1B900 – 使用 fill-opacity 属性(图 c)。<div class="code_snipet_position"><button class="copy_code">Copy</button><div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java"> 1&lt;svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg"&gt; 2 &lt;rect x="310" y="30" width="100" height="100" fill="rgba(0,50,255,0.8)" /&gt; 3 &lt;rect x="250" y="50" width="110" height="100" fill="rgba(0,50,255,0.7)" /&gt; 4 &lt;rect x="170" y="90" width="110" height="100" fill="rgba(0,50,255,0.6)" /&gt; 5 &lt;rect x="100" y="50" width="110" height="100" fill="rgba(0,50,255,0.4)" /&gt; 6 &lt;rect x="50" y="30" width="110" height="100" fill="rgba(0,50,255,0.2)" /&gt; 8 &lt;rect x="710" y="30" width="100" height="100" fill="hsla(0,100%,50%,0.8)" /&gt; 9 &lt;rect x="650" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.7)" /&gt; 10 &lt;rect x="570" y="90" width="110" height="100" fill="hsla(0,100%,50%,0.6)" /&gt; 11 &lt;rect x="500" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.4)" /&gt; 12 &lt;rect x="450" y="30" width="110" height="100" fill="hsla(0,100%,50%,0.2)" /&gt; 14 &lt;rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" /&gt; 15 &lt;rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" /&gt; 16 &lt;rect x="970" y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" /&gt; 17 &lt;rect x="900" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" /&gt; 18 &lt;rect x="850" y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" /&gt; 19&lt;/svg&gt;</code></pre></div></div><img src="/svg/images/drawing/opacity.png" alt="文本“三组具有不同不透明度值的彩色矩形”"/><div class="alert_block_primary">如果您想找到所需的颜色，可以使用免费的在线