不直接粘贴代码，如何优先用CSS访问HTML中的SVG元素？

Since you're using the <object> tag to embed your large SVG, external CSS from your main HTML won't directly penetrate the SVG's isolated document context. But there are reliable ways to style internal elements with CSS:

• Add a <style> tag directly inside the SVG file: This is the most straightforward approach. Open your SVG file and insert a <style> block in the <defs> section or at the top of the document. You can target paths (or any other elements) with standard CSS selectors here, including setting stroke-dasharray, stroke-dashoffset, and animation keyframes. For example:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <style>
      path.animated {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: dash 2s linear forwards;
      }
      @keyframes dash {
        to { stroke-dashoffset: 0; }
      }
    </style>
    <path class="animated" d="M10 50 L90 50" stroke="black" stroke-width="2" fill="none"/>
  </svg>
  

• Use CSS variables: Define variables in your main HTML's CSS, then reference them inside the SVG. This lets you control styles from the parent document without editing the SVG's internal code. For example:
  In your HTML's CSS:

  :root {
    --stroke-dash-value: 100;
    --stroke-color: #ff0000;
  }
  

  In your SVG:

  <path style="stroke: var(--stroke-color); stroke-dasharray: var(--stroke-dash-value);" d="..."/>
  

The common reason JS can't access the SVG's <path> elements is that the SVG hasn't finished loading when your code runs. You need to wait for the <object>'s load event before accessing its content document:

const svgEmbed = document.querySelector('object[data="your-svg-file.svg"]');
svgEmbed.addEventListener('load', () => {
  // Now the SVG is fully loaded
  const svgDocument = svgEmbed.contentDocument;
  const targetPath = svgDocument.querySelector('path#your-path-id');
  
  // You can now manipulate the path's styles or attributes
  targetPath.style.strokeDasharray = '200';
});

Absolutely! If your SVG elements already have some inline style properties (e.g., style="fill: #fff; stroke-width: 3;"), you can still add or override properties like stroke-dasharray via:

• Internal SVG styles (as mentioned earlier) – just make sure your selector has sufficient specificity to override inline styles if needed (use !important sparingly, or target elements by ID/class).
• JS manipulation (once you've accessed the element correctly).
• CSS variables (if you're using that approach).

Inline styles only set the initial state; they don't prevent you from adding other style properties later.

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