1

我一直在尝试使用 PocketSVG 来解析 SVG 资源。使用 PocketSVG，我也可以轻松解析 SVG 的所有路径和路径属性。按照https://stackoverflow.com/a/40683062/3939807的回答，这是我尝试过的示例代码。

guard let url = Bundle.main.url(forResource: shape, withExtension: "svg") else { return nil }
let paths = SVGBezierPath.pathsFromSVG(at: URL)

for path in paths {
   let shapeLayer = CAShapeLayer()
   layer.path = path.CGPath

   var strokeWidth = CGFloat(4.0)
   var strokeColor = UIColor.black.cgColor
   var fillColor = UIColor.white.cgColor

   // Inspect the SVG Path Attributes
   print("path.svgAttributes = \(path.svgAttributes)")

   if let strokeValue = path.svgAttributes["stroke"] {
      strokeColor = strokeValue as! CGColor
   }

   if let fillColorVal = path.svgAttributes["fill"] {
      fillColor = fillColorVal as! CGColor
   }

   // Set its display properties
   shapeLayer.lineWidth = strokeWidth
   shapeLayer.strokeColor = strokeColor
   shapeLayer.fillColor = fillColor

   // Add it to the layer hierarchy
   self.view.layer.addSublayer(shapeLayer)
}

但是我需要访问一些组属性来获得 SVG 的实际结果。一个示例 SVG 资源源代码：

<svg xmlns="http://www.w3.org/2000/svg" width="590.092" height="570.076" viewBox="0 0 590.092 570.076">
<g id="Group_84" data-name="Group 84" transform="translate(-5576.16 -1736.816)">
<path id="Path_120" data-name="Path 120" d="M235.181,359.121l145.342,87.723-38.57-165.332L470.362,170.271l-169.1-14.346L235.181,0,169.1,155.925,0,170.271,128.409,281.512,89.839,446.844Z" transform="translate(5607.22 1833.337) rotate(-8)" fill="none" stroke="#f1c502" stroke-linecap="round" stroke-linejoin="round" stroke-width="55"/>
<path id="Path_121" data-name="Path 121" d="M5790.9,1956.979l45.432-158.481,92.976,145.8" fill="none"/>
<path id="Path_122" data-name="Path 122" d="M5931.647,1944.786l163.137-7.768-108.757,130.214" fill="none"/>
<path id="Path_123" data-name="Path 123" d="M5985.659,2070.376l64,157.588-156.848-68.436" fill="none"/>
<path id="Path_124" data-name="Path 124" d="M5886.89,2160.083l-130.584,109.5,18.126-169.241" fill="none"/>
<path id="Path_125" data-name="Path 125" d="M5772.028,2095.9s-148.709-93.591-146.49-93.221,166.1-44.761,166.1-44.761" fill="none"/> </g> </svg>

标签transform="translate(-5576.16 -1736.816)"下有一个属性。<g>我的问题是如何获取此属性并使用 PocketSVG 应用它。任何形式的帮助将不胜感激。

提前致谢。

4

1 回答 1

0

解决方案非常简单。每个路径都包含UIBezierPath并且它的所有属性svgAttributes都属于类型Dictionary [String: Any]

if let url = Bundle.main.url(forResource: "shape", withExtension: "svg") {
    let paths = SVGBezierPath.pathsFromSVG(at: url)
        
        for path in paths {
            let svgAttributes = path.svgAttributes
            let transform = svgAttributes["transform"]
        }
    }
于 2021-12-17T18:21:23.267 回答