时间戳

首页 > 解决方案 > SVG，带图案的椭圆不显示

svg - 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不显示？

标签： svg

解决方案

尝试这个;

您的错误在于命名 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>

推荐阅读