如何在PHP Imagick中使用SVG CSS样式？其是否不支持<defs>内<style>？

Answer: #

Great question! Yes, this is absolutely a known limitation of PHP Imagick when rendering SVGs. The library's underlying SVG renderer doesn't process or apply CSS styles tucked away in <style> tags within <defs>—it only respects presentation attributes (direct attributes on SVG elements) or inline style attributes.

Here are the most practical workarounds to get your styling working with Imagick:

1. Swap class-based styles for presentation attributes

Instead of defining styles in a centralized <style> block, move each CSS property directly as an attribute on the target SVG element. This is the most straightforward approach for simple SVGs.

Example: Original (non-working) SVG

<svg width="100" height="100">
  <defs>
    <style>
      .dashed-line { stroke-dasharray: 5 5; stroke: #2c3e50; }
    </style>
  </defs>
  <path class="dashed-line" d="M10 10 L90 90" fill="none" />
</svg>

Modified (working) SVG

<svg width="100" height="100">
  <path stroke-dasharray="5 5" stroke="#2c3e50" d="M10 10 L90 90" fill="none" />
</svg>

2. Use inline style attributes

If you prefer sticking to CSS syntax, you can apply styles directly via the style attribute on each SVG element. Imagick does parse these inline styles correctly.

Example:

<svg width="100" height="100">
  <path style="stroke-dasharray: 5 5; stroke: #2c3e50;" d="M10 10 L90 90" fill="none" />
</svg>

3. Programmatically preprocess SVGs to inline styles

If you're dealing with a large number of SVGs or complex CSS rules, you can automate the process of converting <style>-based styles to inline attributes or styles using PHP's DOM tools plus a CSS parser.

Here's a simplified PHP example using DOMDocument and a CSS parser (you'll need a library like sabberworm/php-css-parser for proper CSS parsing):

// Load your SVG content
$svg = file_get_contents('path/to/your.svg');
$dom = new DOMDocument();
libxml_use_internal_errors(true); // Suppress SVG parsing warnings
$dom->loadXML($svg);
libxml_clear_errors();

// Extract and process style tags
$styleTags = $dom->getElementsByTagName('style');
$cssParser = new Sabberworm\CSS\Parser();

foreach ($styleTags as $tag) {
    // Parse the CSS content
    $css = $cssParser->parse($tag->nodeValue);
    
    // Iterate over each CSS rule
    foreach ($css->getAllDeclarationBlocks() as $block) {
        $selectors = $block->getSelectors();
        $declarations = $block->getDeclarations();
        
        // Use XPath to find elements matching each selector
        $xpath = new DOMXPath($dom);
        foreach ($selectors as $selector) {
            $elements = $xpath->query($selector->getSelector());
            if ($elements->length === 0) continue;
            
            // Apply each declaration as a presentation attribute
            foreach ($declarations as $declaration) {
                $prop = $declaration->getProperty();
                $value = $declaration->getValue()->render();
                foreach ($elements as $elem) {
                    $elem->setAttribute($prop, $value);
                }
            }
        }
    }
    
    // Remove the now-unused style tag
    $tag->parentNode->removeChild($tag);
}

// Get the modified SVG content
$processedSvg = $dom->saveXML();

// Now pass this processed SVG to Imagick
$imagick = new Imagick();
$imagick->readImageBlob($processedSvg);
// ... rest of your Imagick processing

This approach scales well and saves you from manually editing every SVG file.

内容的提问来源于stack exchange，提问作者Daniel