修复颜色处理

src/attr.js

@@ -1,21 +1,13 @@
-// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
+/**
-//
+ * {}
-// Licensed under the Apache License, Version 2.0 (the "License");
+ * @author yutent<yutent.io@gmail.com>
-// you may not use this file except in compliance with the License.
+ * @date 2024/03/08 17:59:50
-// You may obtain a copy of the License at
+ */
-//
+
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 import eve from './eve.js'
 import { Snap, SnapElement, Paper, Fragment, getSomeDefs } from './svg.js'
 import { $, is, url } from './utils.js'
 import { doc, win, SEPARATOR } from './lib/constants.js'
-import { parseColor } from './lib/color.js'
 
 let has = 'hasOwnProperty',
   reURLValue = /^url\((['"]?)([^)]+)\1\)$/,
@@ -121,22 +113,7 @@ function fillStroke(name) {
         fill = value.attr(name)
       }
     } else {
-      fill = parseColor(value)
+      fill = String(value)
-      if (fill.error) {
-        let grad = new Snap(getSomeDefs(this).ownerSVGElement).gradient(value)
-        if (grad) {
-          if (!grad.node.id) {
-            $(grad.node, {
-              id: grad.id
-            })
-          }
-          fill = url(grad.node.id)
-        } else {
-          fill = value
-        }
-      } else {
-        fill = Str(fill)
-      }
     }
     let attrs = {}
     attrs[name] = fill

src/filter.js

@@ -7,7 +7,6 @@
 import eve from './eve.js'
 import { select, SnapElement } from './svg.js'
 import { $, url } from './utils.js'
-import { parseColor } from './lib/color.js'
 
 let rgurl = /^\s*url\((.+)\)/,
   Str = String
@@ -84,7 +83,6 @@ export const filter = {
         });
   */
   shadow(dx = 0, dy = 2, blur = 4, color = '#000', opacity = 1) {
-    color = parseColor(color)
     return `<feGaussianBlur in="SourceAlpha" stdDeviation="${blur}"/><feOffset dx="${dx}" dy="${dy}" result="offsetblur"/><feFlood flood-color="${color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="${opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>`
   },
 

src/lib/color.js

@@ -5,6 +5,7 @@
  */
 
 import { cacher, is } from '../utils.js'
+import { COMMA_SPACES } from './constants.js'
 
 const hsrg = { hs: 1, rg: 1 }
 const colourRegExp =
@@ -73,37 +74,7 @@ function packageRGB(r, g, b, o) {
 }
 
 // Colour
-/*\
+
- **
- * Parses color string as RGB object
- - color (string) color string in one of the following formats:
- # <ul>
- #     <li>Color name (<code>red</code>, <code>green</code>, <code>cornflowerblue</code>, etc)</li>
- #     <li>#••• — shortened HTML color: (<code>#000</code>, <code>#fc0</code>, etc.)</li>
- #     <li>#•••••• — full length HTML color: (<code>#000000</code>, <code>#bd2300</code>)</li>
- #     <li>rgb(•••, •••, •••) — red, green and blue channels values: (<code>rgb(200,&nbsp;100,&nbsp;0)</code>)</li>
- #     <li>rgba(•••, •••, •••, •••) — also with opacity</li>
- #     <li>rgb(•••%, •••%, •••%) — same as above, but in %: (<code>rgb(100%,&nbsp;175%,&nbsp;0%)</code>)</li>
- #     <li>rgba(•••%, •••%, •••%, •••%) — also with opacity</li>
- #     <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (<code>hsb(0.5,&nbsp;0.25,&nbsp;1)</code>)</li>
- #     <li>hsba(•••, •••, •••, •••) — also with opacity</li>
- #     <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
- #     <li>hsba(•••%, •••%, •••%, •••%) — also with opacity</li>
- #     <li>hsl(•••, •••, •••) — hue, saturation and luminosity values: (<code>hsb(0.5,&nbsp;0.25,&nbsp;0.5)</code>)</li>
- #     <li>hsla(•••, •••, •••, •••) — also with opacity</li>
- #     <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
- #     <li>hsla(•••%, •••%, •••%, •••%) — also with opacity</li>
- # </ul>
- * Note that `%` can be used any time: `rgb(20%, 255, 50%)`.
- = (object) RGB object in the following format:
- o {
- o     r (number) red,
- o     g (number) green,
- o     b (number) blue,
- o     hex (string) color in HTML/CSS format: #••••••,
- o     error (boolean) true if string can't be parsed
- o }
-\*/
 export const getRGB = cacher(function (colour) {
   if (!colour || !!((colour = String(colour)).indexOf('-') + 1)) {
     return {
@@ -153,7 +124,7 @@ export const getRGB = cacher(function (colour) {
       red = parseInt((t = rgb[3].charAt(1)) + t, 16)
     }
     if (rgb[4]) {
-      values = rgb[4].split(commaSpaces)
+      values = rgb[4].split(COMMA_SPACES)
       red = +values[0]
       values[0].slice(-1) == '%' && (red *= 2.55)
       green = +values[1]
@@ -164,7 +135,7 @@ export const getRGB = cacher(function (colour) {
       values[3] && values[3].slice(-1) == '%' && (opacity /= 100)
     }
     if (rgb[5]) {
-      values = rgb[5].split(commaSpaces)
+      values = rgb[5].split(COMMA_SPACES)
       red = +values[0]
       values[0].slice(-1) == '%' && (red /= 100)
       green = +values[1]
@@ -178,7 +149,7 @@ export const getRGB = cacher(function (colour) {
       return hsb2rgb(red, green, blue, opacity)
     }
     if (rgb[6]) {
-      values = rgb[6].split(commaSpaces)
+      values = rgb[6].split(COMMA_SPACES)
       red = +values[0]
       values[0].slice(-1) == '%' && (red /= 100)
       green = +values[1]

src/lib/constants.js

@@ -77,7 +77,7 @@ export const ISURL = /^url\(['"]?([^\)]+?)['"]?\)$/i
 
 export const SEPARATOR = /[,\s]+/
 export const whitespace = /[\s]/g
-export const commaSpaces = /[\s]*,[\s]*/
+export const COMMA_SPACES = /[\s]*,[\s]*/
 export const bezierrg = /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/
 export const pathCommand =
   /([a-z])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?[\s]*,?[\s]*)+)/gi