SVG,不显示带图案的椭圆

时间:2019-01-05 20:53:42

标签: svg

以下代码应生成一个填充有对角线图案的圆。该代码取自this question,我只是对该单元进行了调整,以得到以下图案:线宽0.2mm和线距1mm。

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="3.2cm" version="1.1" 
  viewBox="0 0 5 3.2" width="5.0cm"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:ev="http://www.w3.org/2001/xml-events"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs />
  <pattern height="0.14142135623730953" id="#1"
    patternUnits="userSpaceOnUse" width="0.14142135623730953">
    <path d="M-0.07071067811865477,0.07071067811865477
             l0.14142135623730953,-0.14142135623730953 
             M-0.07071067811865477,0.21213203435596428
             l0.28284271247461906,-0.28284271247461906
             M0.07071067811865477,0.21213203435596428
             l0.14142135623730953,-0.14142135623730953"
      style="stroke:black; stroke-width:0.02" />
  </pattern>
  <ellipse cx="2" cy="1.6" fill="url(#1)" id="#2" rx="1.5" 
    ry="1.5" stroke="black" stroke-width="0.01" />
  <ellipse cx="3" cy="1.6" fill="none" id="#3" rx="1.5" ry="1.5"
    stroke="none" stroke-width="0.01" />
  <text dominant-baseline="hanging" stroke="black" 
    text-anchor="end" x="0.5" y="0.7000000000000002">$A$</text>
  <text dominant-baseline="hanging" stroke="black" 
    text-anchor="start" x="4.5" y="0.7000000000000002">$B$</text>
</svg>
  

忽略椭圆#3(透明)和两个文本。为什么没有显示椭圆#2

1 个答案:

答案 0 :(得分:2)

尝试一下;

您的错误在于命名id =“#1”

如果您通过ID选择某项内容,则可以编写#elementId

如果您定义元素ID,则可以写id =“ elementId”

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="3.2cm" version="1.1" 
  viewBox="0 0 5 3.2" width="5.0cm"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:ev="http://www.w3.org/2001/xml-events"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs />
  <pattern height="0.14142135623730953" id="1"
    patternUnits="userSpaceOnUse" width="0.14142135623730953">
    <path d="M-0.07071067811865477,0.07071067811865477
             l0.14142135623730953,-0.14142135623730953 
             M-0.07071067811865477,0.21213203435596428
             l0.28284271247461906,-0.28284271247461906
             M0.07071067811865477,0.21213203435596428
             l0.14142135623730953,-0.14142135623730953"
      style="stroke:black; stroke-width:0.02" />
  </pattern>
  <ellipse cx="2" cy="1.6" fill="url(#1)" id="#2" rx="1.5" 
    ry="1.5" stroke="black" stroke-width="0.01" />
  <ellipse cx="3" cy="1.6" fill="none" id="#3" rx="1.5" ry="1.5"
    stroke="none" stroke-width="0.01" />
  <text dominant-baseline="hanging" stroke="black" 
    text-anchor="end" x="0.5" y="0.7000000000000002">$A$</text>
  <text dominant-baseline="hanging" stroke="black" 
    text-anchor="start" x="4.5" y="0.7000000000000002">$B$</text>
</svg>