Question

我正在尝试使用JavaScript将circle附加到svg元素。我创建圆圈时发现你应该使用createElementNS而不是createElement。我这样做了，圆圈确实出现在HTML中，但它仍然没有出现在页面中。这是我的代码：

let ns = 'http://www.w3.org/2000/svg';
let svg = document.getElementsByTagName('svg')[0];
let circle = document.createElementNS(ns, 'circle');

circle.setAttributeNS(ns, 'cx', 100);
circle.setAttributeNS(ns, 'cy', 100);
circle.setAttributeNS(ns, 'r', 10);
circle.style.fill = 'red';

svg.appendChild(circle);

输出结果为：

<svg><circle cx="100" cy="100" r="10" style="fill: red;"></circle></svg>

但是视图是空的。查看Codepen here.

Answer 1

使用package com.path.to.project.config; import com.path.to.project.jwt.JwtAuthenticationEntryPoint; import com.path.to.project.jwt.JwtAuthenticationTokenFilter; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder; import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; import org.springframework.security.config.http.SessionCreationPolicy; import org.springframework.security.core.userdetails.UserDetailsService; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.crypto.password.PasswordEncoder; import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter; @Configuration @EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) public class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private JwtAuthenticationEntryPoint unauthorizedHandler; @Autowired private UserDetailsService userDetailsService; @Autowired public void configureAuthentication(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception { authenticationManagerBuilder.userDetailsService(userDetailsService) .passwordEncoder(passwordEncoder()); } @Bean public JwtAuthenticationTokenFilter authenticationTokenFilterBean() throws Exception { return new JwtAuthenticationTokenFilter(); } @Override protected void configure(HttpSecurity httpSecurity) throws Exception { httpSecurity .csrf().disable() .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and() .authorizeRequests() .antMatchers("/auth/**").permitAll() .antMatchers("/register/**").permitAll() .antMatchers("/swagger-ui*").permitAll() .antMatchers("/v2/**").permitAll() .antMatchers("/sysadmin/**").hasRole("SYSADMIN") .antMatchers("/admin/**").hasRole("ADMIN") .antMatchers("/siteadmin/**").hasRole("SITEADMIN") .anyRequest().authenticated(); // Custom JWT based security filter httpSecurity .addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class); } @Bean public PasswordEncoder passwordEncoder() { PasswordEncoder encoder = new BCryptPasswordEncoder(); return encoder; } }创建圆元素后，您不需要createElementNS，您应该使用setAttributeNS函数：

setAttribute

var ns = 'http://www.w3.org/2000/svg';
var svg = document.getElementsByTagName('svg')[0];
var circle = document.createElementNS(ns, 'circle');

circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 10);
circle.style.fill = 'red';

svg.appendChild(circle);

svg{ width: 100%; height: 100%; background-color: blue; }

即使在使用命名空间之后也无法附加到SVG

1 个答案: