Question

我正在使用svg sprites，我试图改变某些由使用功能放置的svg中的笔触属性。它将ShadowRoot的扩展svg放入DOM中，看起来像是从外部css规则中锁定的。

但是我已经在样式中看到了使用的可能解决方案，但它并不起作用。有人能帮帮我吗？是否可以这样做？

<svg style="display:none;">
  <symbol id="test">
      <rect x="10" y="10" width="100" height="100" stroke="green"/> 
  </symbol>
</svg>

<svg id="some" class="icon"><use xlink:href="#test" /></svg>

#some use rect {
 stroke: red !important;
}

Answer 1

您有两个相同的ID，您需要从symboland中删除笔划适用于#test { fill: none; } .red { stroke: red; } .green { stroke: green; }类。

<svg style="display:none;">
  <symbol id="test">
      <rect x="10" y="10" width="100" height="100"/> 
  </symbol>
</svg>

<svg class="icon"><use xlink:href="#test" class="red"/></svg>

<svg class="icon"><use xlink:href="#test" class="green"/></svg>

#!/bin/bash
while getopts :u:r:w: opt; do
   case $opt in
     u ) user="$OPTARG"                       ;;
     r ) my_read=1                            ;;
     w ) my_write=1                           ;;
    \? ) echo "${0##*/}" [ -erw ]; exit 1     ;;
  esac
done

if [[ ${my_write} -eq 1 ]] ; then
    echo "write"
fi

if [[ ${my_read} -eq 1 ]] ; then
    echo "read"
fi

更改使用放置的svg rect笔划

1 个答案: